use system theme when the theme is not set

gui/src/components/OnnxWeb.tsx

@@ -1,88 +1,29 @@
-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 { mustExist } from '@apextoaster/js-utils';
+import { TabContext, TabList } from '@mui/lab';
 import { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import * as React from 'react';
+import { useContext, useMemo } 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';
 import { Logo } from './Logo.js';
-import { Blend } from './tab/Blend.js';
-import { Img2Img } from './tab/Img2Img.js';
-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';
+import { getTheme, getTab, TAB_LABELS } from './utils.js';
 
 export function OnnxWeb() {
   /* checks for system light/dark mode preference */
   const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const state = useStore(mustExist(React.useContext(StateContext)));
+  const state = useStore(mustExist(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
-          },
-        });
+  const theme = useMemo(
+    () => createTheme({
+      palette: {
+        mode: getTheme(state.theme, prefersDarkMode) as PaletteMode
       }
-    },
-    [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],
   );
 

gui/src/components/tab/Settings.tsx

@@ -1,6 +1,6 @@
 import { doesExist, mustExist } from '@apextoaster/js-utils';
-import { Refresh, Brightness4, Brightness7 } from '@mui/icons-material';
-import { Alert, Button, Stack, Switch, TextField } from '@mui/material';
+import { Refresh } from '@mui/icons-material';
+import { Alert, Button, FormControlLabel, Stack, Switch, TextField, useMediaQuery } from '@mui/material';
 import * as React from 'react';
 import { useContext, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import { useStore } from 'zustand';
 
 import { getApiRoot } from '../../config.js';
 import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
+import { getTheme } from '../../utils.js';
 import { NumericField } from '../input/NumericField.js';
 
 function removeBlobs(key: string, value: unknown): unknown {
@@ -28,8 +29,10 @@ function removeBlobs(key: string, value: unknown): unknown {
 }
 
 export function Settings() {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
   const config = mustExist(useContext(ConfigContext));
   const state = useStore(mustExist(useContext(StateContext)));
+  const theme = getTheme(state.theme, prefersDarkMode);
 
   const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
   const [root, setRoot] = useState(getApiRoot(config));
@@ -80,13 +83,17 @@ export function Settings() {
         {t('setting.loadState')}
       </Button>
     </Stack>
-    <Switch onClick={() => {
-      if (state.theme === 'light') {
-        state.setTheme('dark');
-      } else {
-        state.setTheme('light');
-      }
-    }} />
+    <FormControlLabel control={
+      <Switch checked={theme === 'dark'}
+        onClick={() => {
+          if (theme === 'light') {
+            state.setTheme('dark');
+          } else {
+            state.setTheme('light');
+          }
+        }}
+      />
+    } label={t('setting.darkMode')} />
     <Stack direction='row' spacing={2}>
       <Button onClick={() => state.resetTxt2Img()} color='warning'>{t('setting.reset.txt2img')}</Button>
       <Button onClick={() => state.resetImg2Img()} color='warning'>{t('setting.reset.img2img')}</Button>

gui/src/components/utils.ts

@@ -17,3 +17,13 @@ export function getTab(hash: string): string {
 
   return TAB_LABELS[0];
 }
+
+export function getTheme(currentTheme: string, preferDark: boolean): string {
+  if (currentTheme === '') {
+    if (preferDark) {
+      return 'dark';
+    }
+    return 'light';
+  }
+  return currentTheme;
+}

gui/src/strings/de.ts

@@ -151,6 +151,7 @@ export const I18N_STRINGS_DE = {
         scheduler: 'Standardplaner',
         server: 'API-Server',
         state: 'Kundenstatus',
+        darkMode: 'Dunkelmodus',
       },
       tab: {
         blend: 'Mischung',

gui/src/strings/en.ts

@@ -202,6 +202,7 @@ export const I18N_STRINGS_EN = {
         scheduler: 'Default Scheduler',
         server: 'API Server',
         state: 'Client State',
+        darkMode: 'Dark Mode',
       },
       scheduler: {
         'ddim': 'DDIM',

gui/src/strings/es.ts

@@ -151,6 +151,7 @@ export const I18N_STRINGS_ES = {
         scheduler: 'Programador predeterminado',
         server: 'Servidor API',
         state: 'Estado del cliente',
+        darkMode: 'Modo Oscuro',
       },
       tab: {
         blend: 'Mezclar',

gui/src/strings/fr.ts

@@ -151,6 +151,7 @@ export const I18N_STRINGS_FR = {
         scheduler: '',
         server: '',
         state: '',
+        darkMode: 'Mode Sombre',
       },
       tab: {
         blend: '',

gui/src/utils.ts

@@ -25,4 +25,4 @@ export function trimHash(val: string): string {
   }
 
   return val;
-}
+}