add dark mode with toggle and system preference
This commit is contained in:
parent
48f1b745fe
commit
d61268b3a0
|
@ -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 (
|
||||
|
|
Loading…
Reference in New Issue