aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--webui/src/components/Themer.tsx14
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>
);