idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +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

15
web/src/App.tsx
View file

@ -3,6 +3,7 @@
* SPDX-License-Identifier: GPL-2.0-or-later
*/
import { useEffect } from "react";
import { RouterProvider } from "@tanstack/react-router"
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "react-hot-toast";
@ -10,7 +11,7 @@ import { Portal } from "react-portal";
import { Router } from "@app/routes";
import { routerBasePath } from "@utils";
import { queryClient } from "@api/QueryClient";
import { AuthContext } from "@utils/Context";
import { AuthContext, SettingsContext } from "@utils/Context";
declare module '@tanstack/react-router' {
interface Register {
@ -19,6 +20,18 @@ declare module '@tanstack/react-router' {
}
export function App() {
const [ , setSettings] = SettingsContext.use();
useEffect(() => {
const themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleThemeChange = (e: MediaQueryListEvent) => {
setSettings(prevState => ({ ...prevState, darkTheme: e.matches }));
};
themeMediaQuery.addEventListener('change', handleThemeChange);
return () => themeMediaQuery.removeEventListener('change', handleThemeChange);
}, [setSettings]);
return (
<QueryClientProvider client={queryClient}>
<Portal>