diff options
| -rw-r--r-- | webui/src/components/Themer.tsx | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/webui/src/components/Themer.tsx b/webui/src/components/Themer.tsx index 4adef24a..badd543b 100644 --- a/webui/src/components/Themer.tsx +++ b/webui/src/components/Themer.tsx @@ -1,6 +1,6 @@ import React, { createContext, useContext, useState } from 'react'; -import { ThemeProvider, useMediaQuery } from '@material-ui/core'; +import { ThemeProvider } from '@material-ui/core'; import IconButton from '@material-ui/core/IconButton/IconButton'; import Tooltip from '@material-ui/core/Tooltip/Tooltip'; import { Theme } from '@material-ui/core/styles'; @@ -35,22 +35,20 @@ type Props = { darkTheme: Theme; }; const Themer = ({ children, lightTheme, darkTheme }: Props) => { - const preferseDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); - const browserMode = preferseDarkMode ? 'dark' : 'light'; const savedMode = localStorage.getItem('themeMode'); - const preferedMode = savedMode != null ? savedMode : browserMode; - const [curMode, setMode] = useState(preferedMode); + const preferedMode = savedMode != null ? savedMode : 'light'; + const [mode, setMode] = useState(preferedMode); const toggleMode = () => { - const preferedMode = curMode === 'light' ? 'dark' : 'light'; + const preferedMode = mode === 'light' ? 'dark' : 'light'; localStorage.setItem('themeMode', preferedMode); setMode(preferedMode); }; - const preferedTheme = preferedMode === 'dark' ? darkTheme : lightTheme; + const preferedTheme = mode === 'dark' ? darkTheme : lightTheme; return ( - <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: curMode }}> + <ThemeContext.Provider value={{ toggleMode: toggleMode, mode: mode }}> <ThemeProvider theme={preferedTheme}>{children}</ThemeProvider> </ThemeContext.Provider> ); |