You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.6 KiB
73 lines
1.6 KiB
import {
|
|
ColorScheme,
|
|
ColorSchemeProvider,
|
|
MantineProvider,
|
|
MantineThemeOverride,
|
|
} from "@mantine/core";
|
|
import { useColorScheme } from "@mantine/hooks";
|
|
import { FunctionComponent, useCallback, useEffect, useState } from "react";
|
|
|
|
const theme: MantineThemeOverride = {
|
|
fontFamily: [
|
|
"Roboto",
|
|
"open sans",
|
|
"Helvetica Neue",
|
|
"Helvetica",
|
|
"Arial",
|
|
"sans-serif",
|
|
],
|
|
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 };
|
|
}
|
|
|
|
const ThemeProvider: FunctionComponent = ({ children }) => {
|
|
const { colorScheme, toggleColorScheme } = useAutoColorScheme();
|
|
|
|
return (
|
|
<ColorSchemeProvider
|
|
colorScheme={colorScheme}
|
|
toggleColorScheme={toggleColorScheme}
|
|
>
|
|
<MantineProvider
|
|
withGlobalStyles
|
|
withNormalizeCSS
|
|
theme={{ colorScheme, ...theme }}
|
|
emotionOptions={{ key: "bazarr" }}
|
|
>
|
|
{children}
|
|
</MantineProvider>
|
|
</ColorSchemeProvider>
|
|
);
|
|
};
|
|
|
|
export default ThemeProvider;
|