2022-05-31 15:49:04 +00:00
|
|
|
import {
|
|
|
|
ColorScheme,
|
|
|
|
ColorSchemeProvider,
|
2022-09-20 20:50:18 +00:00
|
|
|
createEmotionCache,
|
2022-05-31 15:49:04 +00:00
|
|
|
MantineProvider,
|
|
|
|
MantineThemeOverride,
|
|
|
|
} from "@mantine/core";
|
|
|
|
import { useColorScheme } from "@mantine/hooks";
|
2023-06-04 15:03:59 +00:00
|
|
|
import {
|
|
|
|
FunctionComponent,
|
|
|
|
PropsWithChildren,
|
|
|
|
useCallback,
|
|
|
|
useEffect,
|
|
|
|
useState,
|
|
|
|
} from "react";
|
2022-05-31 15:49:04 +00:00
|
|
|
|
|
|
|
const theme: MantineThemeOverride = {
|
2022-10-28 13:38:11 +00:00
|
|
|
fontFamily: "Roboto, open sans, Helvetica Neue, Helvetica, Arial, sans-serif",
|
2022-05-31 15:49:04 +00:00
|
|
|
colors: {
|
|
|
|
brand: [
|
|
|
|
"#F8F0FC",
|
|
|
|
"#F3D9FA",
|
|
|
|
"#EEBEFA",
|
|
|
|
"#E599F7",
|
|
|
|
"#DA77F2",
|
|
|
|
"#CC5DE8",
|
|
|
|
"#BE4BDB",
|
|
|
|
"#AE3EC9",
|
|
|
|
"#9C36B5",
|
|
|
|
"#862E9C",
|
|
|
|
],
|
|
|
|
},
|
|
|
|
primaryColor: "brand",
|
|
|
|
};
|
|
|
|
|
|
|
|
function useAutoColorScheme() {
|
|
|
|
const preferredColorScheme = useColorScheme();
|
|
|
|
const [colorScheme, setColorScheme] = useState(preferredColorScheme);
|
|
|
|
|
|
|
|
// automatically switch dark/light theme
|
|
|
|
useEffect(() => {
|
|
|
|
setColorScheme(preferredColorScheme);
|
|
|
|
}, [preferredColorScheme]);
|
|
|
|
|
|
|
|
const toggleColorScheme = useCallback((value?: ColorScheme) => {
|
|
|
|
setColorScheme((scheme) => value || (scheme === "dark" ? "light" : "dark"));
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return { colorScheme, setColorScheme, toggleColorScheme };
|
|
|
|
}
|
|
|
|
|
2022-09-20 20:50:18 +00:00
|
|
|
const emotionCache = createEmotionCache({ key: "bazarr" });
|
|
|
|
|
2023-06-04 15:03:59 +00:00
|
|
|
const ThemeProvider: FunctionComponent<PropsWithChildren> = ({ children }) => {
|
2022-05-31 15:49:04 +00:00
|
|
|
const { colorScheme, toggleColorScheme } = useAutoColorScheme();
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ColorSchemeProvider
|
|
|
|
colorScheme={colorScheme}
|
|
|
|
toggleColorScheme={toggleColorScheme}
|
|
|
|
>
|
|
|
|
<MantineProvider
|
|
|
|
withGlobalStyles
|
|
|
|
withNormalizeCSS
|
|
|
|
theme={{ colorScheme, ...theme }}
|
2022-09-20 20:50:18 +00:00
|
|
|
emotionCache={emotionCache}
|
2022-05-31 15:49:04 +00:00
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</MantineProvider>
|
|
|
|
</ColorSchemeProvider>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default ThemeProvider;
|