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 { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
import { TabContext, TabList, TabPanel } from '@mui/lab';
|
||||||
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 { Box, Container, Divider, PaletteMode, Tab, useMediaQuery, CssBaseline } from '@mui/material';
|
||||||
|
import { createTheme, ThemeProvider } from '@mui/material/styles';
|
||||||
import * as React from 'react';
|
import * as React 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';
|
||||||
|
@ -15,6 +19,7 @@ import { Inpaint } from './tab/Inpaint.js';
|
||||||
import { Settings } from './tab/Settings.js';
|
import { Settings } from './tab/Settings.js';
|
||||||
import { Txt2Img } from './tab/Txt2Img.js';
|
import { Txt2Img } from './tab/Txt2Img.js';
|
||||||
import { Upscale } from './tab/Upscale.js';
|
import { Upscale } from './tab/Upscale.js';
|
||||||
|
import { StateContext } from '../state.js';
|
||||||
import { getTab, TAB_LABELS } from './utils.js';
|
import { getTab, TAB_LABELS } from './utils.js';
|
||||||
import { StateContext } from '../state.js';
|
import { StateContext } from '../state.js';
|
||||||
|
|
||||||
|
@ -50,6 +55,37 @@ export function OnnxWeb() {
|
||||||
[prefersDarkMode, state.theme],
|
[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();
|
const [hash, setHash] = useHash();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
Loading…
Reference in New Issue