-
-
Notifications
You must be signed in to change notification settings - Fork 208
/
ThemeContext.tsx
64 lines (56 loc) · 1.87 KB
/
ThemeContext.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import * as React from 'react';
import Head from 'next/head';
import { PaletteMode } from '@mui/material';
import { ThemeProvider as MuiThemeProvider, createTheme } from '@mui/material/styles';
import { deepmerge } from '@mui/utils';
import useMediaQuery from '@mui/material/useMediaQuery';
import { getDesignTokens, getThemedComponents, getMetaThemeColor } from './theme';
import useLocalStorageState from './utils/useLocalStorageState';
interface ThemeProviderProps {
children?: React.ReactNode;
}
export type ThemeMode = PaletteMode | 'system';
function usePreferredMode(): PaletteMode {
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
return prefersDarkMode ? 'dark' : 'light';
}
export function useThemeMode() {
const [themeMode, setThemeMode] = useLocalStorageState<ThemeMode>(
'toolpad-palette-mode',
'system',
);
return { themeMode, setThemeMode };
}
export function usePaletteMode(): PaletteMode {
const preferredMode = usePreferredMode();
const { themeMode } = useThemeMode();
return themeMode === 'system' ? preferredMode : themeMode;
}
export function ThemeProvider({ children }: ThemeProviderProps) {
const paletteMode = usePaletteMode();
const theme = React.useMemo(() => {
const brandingDesignTokens = getDesignTokens(paletteMode);
let nextTheme = createTheme({
...brandingDesignTokens,
palette: {
...brandingDesignTokens.palette,
mode: paletteMode,
},
});
nextTheme = deepmerge(nextTheme, getThemedComponents(nextTheme));
return nextTheme;
}, [paletteMode]);
return (
<MuiThemeProvider theme={theme}>
<Head>
{/* PWA primary color */}
<meta
name="theme-color"
content={getMetaThemeColor(paletteMode)}
media={`(prefers-color-scheme: ${paletteMode})`}
/>
</Head>
{children}
</MuiThemeProvider>
);
}