idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-24 01:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): add theme toggle to navbar (#1540)

Browse source 
* feat(web): add theme toggle to navbar

* refactor: move OS theme detection to App.tsx

* fix:  disallowed unused variables

* fix: removed unused variable

* refactor: check for os color scheme in SettingsContextDefaults

* refactor: remove unnecessary iconTheme variable

* fix: add title tag to button
This commit is contained in:
soup 2024-05-07 12:42:52 +02:00 • committed by GitHub
parent 28172cfba6
commit 3dab295387
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 42 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/components/header/RightNav.tsx
View file

@ -10,14 +10,38 @@ import { Menu, Transition } from "@headlessui/react";
import { classNames } from "@utils";
import { RightNavProps } from "./_shared";
import { Cog6ToothIcon, ArrowLeftOnRectangleIcon } from "@heroicons/react/24/outline";
import {Link} from "@tanstack/react-router";
import { Cog6ToothIcon, ArrowLeftOnRectangleIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
import { Link } from "@tanstack/react-router";
import { SettingsContext } from "@utils/Context";
export const RightNav = (props: RightNavProps) => {
const [settings, setSettings] = SettingsContext.use();
const toggleTheme = () => {
setSettings(prevState => ({
...prevState,
darkTheme: !prevState.darkTheme
}));
};
return (
<div className="hidden sm:block">
<div className="ml-4 flex items-center sm:ml-6">
<Menu as="div" className="ml-3 relative">
<div className="mt-1 items-center">
<button
onClick={toggleTheme}
className="p-1 rounded-full focus:outline-none focus:none transition duration-100 ease-out transform hover:bg-gray-200 dark:hover:bg-gray-800 hover:scale-100"
title={settings.darkTheme ? "Switch to light mode (currently dark mode)" : "Switch to dark mode (currently light mode)"}
>
{settings.darkTheme ? (
<MoonIcon className="h-4 w-4 text-gray-500 transition duration-100 ease-out transform" aria-hidden="true" />
) : (
<SunIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
)}
</button>
</div>
<Menu as="div" className="ml-2 relative">
{({ open }) => (
<>
<Menu.Button