Ignore system prefered colorscheme mode

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>
   );

Change summary

Detailed changes

webui/src/components/Themer.tsx 🔗