use system theme when the theme is not set
This commit is contained in:
parent
d61268b3a0
commit
6bb815cccf
|
@ -1,88 +1,29 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { mustExist } from '@apextoaster/js-utils';
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { TabContext, TabList } from '@mui/lab';
|
||||||
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 { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
|
||||||
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { useContext, useMemo } from 'react';
|
||||||
import { useHash } from 'react-use/lib/useHash';
|
import { useHash } from 'react-use/lib/useHash';
|
||||||
|
|
||||||
import { useStore } from 'zustand';
|
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
import { ModelControl } from './control/ModelControl.js';
|
import { ModelControl } from './control/ModelControl.js';
|
||||||
import { ImageHistory } from './ImageHistory.js';
|
import { ImageHistory } from './ImageHistory.js';
|
||||||
import { Logo } from './Logo.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 { StateContext } from '../state.js';
|
||||||
|
import { getTheme, getTab, TAB_LABELS } from './utils.js';
|
||||||
|
|
||||||
export function OnnxWeb() {
|
export function OnnxWeb() {
|
||||||
/* checks for system light/dark mode preference */
|
/* checks for system light/dark mode preference */
|
||||||
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||||
const state = useStore(mustExist(React.useContext(StateContext)));
|
const state = useStore(mustExist(useContext(StateContext)));
|
||||||
|
|
||||||
const theme = React.useMemo(
|
const theme = useMemo(
|
||||||
() => {
|
() => createTheme({
|
||||||
if (state.theme === '') {
|
palette: {
|
||||||
if (prefersDarkMode) {
|
mode: getTheme(state.theme, prefersDarkMode) as PaletteMode
|
||||||
return createTheme({
|
|
||||||
palette: {
|
|
||||||
mode: 'dark'
|
|
||||||
},
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return createTheme({
|
|
||||||
palette: {
|
|
||||||
mode: 'light'
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return createTheme({
|
|
||||||
palette: {
|
|
||||||
mode: state.theme 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],
|
[prefersDarkMode, state.theme],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Refresh, Brightness4, Brightness7 } from '@mui/icons-material';
|
import { Refresh } from '@mui/icons-material';
|
||||||
import { Alert, Button, Stack, Switch, TextField } from '@mui/material';
|
import { Alert, Button, FormControlLabel, Stack, Switch, TextField, useMediaQuery } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useContext, useState } from 'react';
|
import { useContext, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
@ -8,6 +8,7 @@ import { useStore } from 'zustand';
|
||||||
|
|
||||||
import { getApiRoot } from '../../config.js';
|
import { getApiRoot } from '../../config.js';
|
||||||
import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
|
import { ConfigContext, StateContext, STATE_KEY } from '../../state.js';
|
||||||
|
import { getTheme } from '../../utils.js';
|
||||||
import { NumericField } from '../input/NumericField.js';
|
import { NumericField } from '../input/NumericField.js';
|
||||||
|
|
||||||
function removeBlobs(key: string, value: unknown): unknown {
|
function removeBlobs(key: string, value: unknown): unknown {
|
||||||
|
@ -28,8 +29,10 @@ function removeBlobs(key: string, value: unknown): unknown {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Settings() {
|
export function Settings() {
|
||||||
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||||
const config = mustExist(useContext(ConfigContext));
|
const config = mustExist(useContext(ConfigContext));
|
||||||
const state = useStore(mustExist(useContext(StateContext)));
|
const state = useStore(mustExist(useContext(StateContext)));
|
||||||
|
const theme = getTheme(state.theme, prefersDarkMode);
|
||||||
|
|
||||||
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
const [json, setJson] = useState(JSON.stringify(state, removeBlobs));
|
||||||
const [root, setRoot] = useState(getApiRoot(config));
|
const [root, setRoot] = useState(getApiRoot(config));
|
||||||
|
@ -80,13 +83,17 @@ export function Settings() {
|
||||||
{t('setting.loadState')}
|
{t('setting.loadState')}
|
||||||
</Button>
|
</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
<Switch onClick={() => {
|
<FormControlLabel control={
|
||||||
if (state.theme === 'light') {
|
<Switch checked={theme === 'dark'}
|
||||||
state.setTheme('dark');
|
onClick={() => {
|
||||||
} else {
|
if (theme === 'light') {
|
||||||
state.setTheme('light');
|
state.setTheme('dark');
|
||||||
}
|
} else {
|
||||||
}} />
|
state.setTheme('light');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
} label={t('setting.darkMode')} />
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<Button onClick={() => state.resetTxt2Img()} color='warning'>{t('setting.reset.txt2img')}</Button>
|
<Button onClick={() => state.resetTxt2Img()} color='warning'>{t('setting.reset.txt2img')}</Button>
|
||||||
<Button onClick={() => state.resetImg2Img()} color='warning'>{t('setting.reset.img2img')}</Button>
|
<Button onClick={() => state.resetImg2Img()} color='warning'>{t('setting.reset.img2img')}</Button>
|
||||||
|
|
|
@ -17,3 +17,13 @@ export function getTab(hash: string): string {
|
||||||
|
|
||||||
return TAB_LABELS[0];
|
return TAB_LABELS[0];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function getTheme(currentTheme: string, preferDark: boolean): string {
|
||||||
|
if (currentTheme === '') {
|
||||||
|
if (preferDark) {
|
||||||
|
return 'dark';
|
||||||
|
}
|
||||||
|
return 'light';
|
||||||
|
}
|
||||||
|
return currentTheme;
|
||||||
|
}
|
|
@ -151,6 +151,7 @@ export const I18N_STRINGS_DE = {
|
||||||
scheduler: 'Standardplaner',
|
scheduler: 'Standardplaner',
|
||||||
server: 'API-Server',
|
server: 'API-Server',
|
||||||
state: 'Kundenstatus',
|
state: 'Kundenstatus',
|
||||||
|
darkMode: 'Dunkelmodus',
|
||||||
},
|
},
|
||||||
tab: {
|
tab: {
|
||||||
blend: 'Mischung',
|
blend: 'Mischung',
|
||||||
|
|
|
@ -202,6 +202,7 @@ export const I18N_STRINGS_EN = {
|
||||||
scheduler: 'Default Scheduler',
|
scheduler: 'Default Scheduler',
|
||||||
server: 'API Server',
|
server: 'API Server',
|
||||||
state: 'Client State',
|
state: 'Client State',
|
||||||
|
darkMode: 'Dark Mode',
|
||||||
},
|
},
|
||||||
scheduler: {
|
scheduler: {
|
||||||
'ddim': 'DDIM',
|
'ddim': 'DDIM',
|
||||||
|
|
|
@ -151,6 +151,7 @@ export const I18N_STRINGS_ES = {
|
||||||
scheduler: 'Programador predeterminado',
|
scheduler: 'Programador predeterminado',
|
||||||
server: 'Servidor API',
|
server: 'Servidor API',
|
||||||
state: 'Estado del cliente',
|
state: 'Estado del cliente',
|
||||||
|
darkMode: 'Modo Oscuro',
|
||||||
},
|
},
|
||||||
tab: {
|
tab: {
|
||||||
blend: 'Mezclar',
|
blend: 'Mezclar',
|
||||||
|
|
|
@ -151,6 +151,7 @@ export const I18N_STRINGS_FR = {
|
||||||
scheduler: '',
|
scheduler: '',
|
||||||
server: '',
|
server: '',
|
||||||
state: '',
|
state: '',
|
||||||
|
darkMode: 'Mode Sombre',
|
||||||
},
|
},
|
||||||
tab: {
|
tab: {
|
||||||
blend: '',
|
blend: '',
|
||||||
|
|
|
@ -25,4 +25,4 @@ export function trimHash(val: string): string {
|
||||||
}
|
}
|
||||||
|
|
||||||
return val;
|
return val;
|
||||||
}
|
}
|
Loading…
Reference in New Issue