79 lines
3.0 KiB
TypeScript
79 lines
3.0 KiB
TypeScript
import {
|
|
AppProps,
|
|
ErrorBoundary,
|
|
ErrorComponent,
|
|
ErrorFallbackProps,
|
|
useQueryErrorResetBoundary,
|
|
} from "blitz"
|
|
|
|
import CssBaseline from "@mui/material/CssBaseline";
|
|
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
|
import React, { useEffect } from "react";
|
|
import { useMediaQuery } from "@mui/material";
|
|
import { useGlobalState } from "app/core/state/GlobalState";
|
|
import { LocalStorageKeys } from "app/core/dto/SaveKeys";
|
|
import { ThemeMode } from "app/core/state/ThemeMode";
|
|
import { darkPalette } from "app/core/theme/darkTheme";
|
|
import { lightPalette } from "app/core/theme/lightTheme";
|
|
import { getTheme } from "app/core/theme/Theme";
|
|
|
|
export default function App({ Component, pageProps }: AppProps) {
|
|
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
|
|
const getLayout = Component.getLayout || ((page) => page)
|
|
|
|
return (
|
|
<ThemeProvider theme={getTheme(preferedColorScheme === ThemeMode.DARK_MODE ? darkPalette : lightPalette)}>
|
|
<CssBaseline />
|
|
<ErrorBoundary
|
|
FallbackComponent={RootErrorFallback}
|
|
onReset={useQueryErrorResetBoundary().reset}
|
|
>
|
|
{getLayout(<Component {...pageProps} />)}
|
|
</ErrorBoundary>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
/*
|
|
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>
|
|
</>
|
|
)
|
|
*/
|
|
|
|
function RootErrorFallback({ error }: ErrorFallbackProps) {
|
|
return <ErrorComponent statusCode={error.statusCode || 400} title={error.message || error.name} />
|
|
}
|