add dark mode with toggle and system preference

gui/src/components/OnnxWeb.tsx

@@ -1,10 +1,14 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
+import { doesExist, mustExist } from '@apextoaster/js-utils';
 import { TabContext, TabList, TabPanel } from '@mui/lab';
 import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
 import { useHash } from 'react-use/lib/useHash';
 
+import { useStore } from 'zustand';
 import { useStore } from 'zustand';
 import { ModelControl } from './control/ModelControl.js';
 import { ImageHistory } from './ImageHistory.js';
@@ -15,6 +19,7 @@ import { Inpaint } from './tab/Inpaint.js';
 import { Settings } from './tab/Settings.js';
 import { Txt2Img } from './tab/Txt2Img.js';
 import { Upscale } from './tab/Upscale.js';
+import { StateContext } from '../state.js';
 import { getTab, TAB_LABELS } from './utils.js';
 import { StateContext } from '../state.js';
 
@@ -50,6 +55,37 @@ export function OnnxWeb() {
     [prefersDarkMode, state.theme],
   );
 
+  /* checks for system light/dark mode preference */
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const state = useStore(mustExist(React.useContext(StateContext)));
+
+  const theme = React.useMemo(
+    () => {
+      if (state.theme === '') {
+        if (prefersDarkMode) {
+          return createTheme({
+            palette: {
+              mode: 'dark'
+            },
+          });
+        } else {
+          return createTheme({
+            palette: {
+              mode: 'light'
+            },
+          });
+        }
+      } else {
+        return createTheme({
+          palette: {
+            mode: state.theme as PaletteMode
+          },
+        });
+      }
+    },
+    [prefersDarkMode, state.theme],
+  );
+
   const [hash, setHash] = useHash();
 
   return (