39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
|
import {ThemeProvider} from '@mui/material/styles'
|
||
|
|
import {MainPage} from './pages/MainPage'
|
||
|
|
import {ThemeMode} from './state/ThemeMode'
|
||
|
|
import {CssBaseline, useMediaQuery} from '@mui/material'
|
||
|
|
import {useEffect} from "react";
|
||
|
|
import {darkPalette} from "./theme/darkTheme";
|
||
|
|
import {lightPalette} from "./theme/lightTheme";
|
||
|
|
import {getTheme} from "./theme/Theme";
|
||
|
|
import {LocalStorageKeys} from "./dataaccess/SaveKeys";
|
||
|
|
import { useGlobalState } from './state/GlobalState'
|
||
|
|
|
||
|
|
const App = () => {
|
||
|
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||
|
|
const [preferedColorScheme ,setPreferedColorScheme] = useGlobalState(state => [state.preferedColorScheme, state.setPreferedColorScheme])
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const localPreferedTheme = localStorage.getItem(LocalStorageKeys.PREFERED_COLOR_SCHEME);
|
||
|
|
if (localPreferedTheme) {
|
||
|
|
setPreferedColorScheme(localPreferedTheme as ThemeMode)
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
const preferedTheme = prefersDarkMode ? ThemeMode.DARK_MODE : ThemeMode.LIGHT_MODE;
|
||
|
|
setPreferedColorScheme(preferedTheme)
|
||
|
|
// eslint-disable-next-line
|
||
|
|
}, [prefersDarkMode]) // Need to be only used on prefersDarkMode change
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
|
||
|
|
<CssBaseline/>
|
||
|
|
<MainPage/>
|
||
|
|
</ThemeProvider>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|