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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
import {
type Dispatch,
type FC,
type ReactNode,
type SetStateAction,
createContext,
useMemo,
useEffect,
} from 'react';
import type { Theme } from '../../../types';
import {
getDataAttributeFrom,
getThemeFromSystem,
themeValidator,
} from '../../helpers';
import { useLocalStorage, useSystemColorScheme } from '../../hooks';
type ThemeContextProps = {
resolvedTheme: Exclude<Theme, 'system'>;
setTheme: Dispatch<SetStateAction<Theme>>;
theme: Theme;
};
export const ThemeContext = createContext<ThemeContextProps>({
resolvedTheme: getThemeFromSystem(),
setTheme: (value) => value,
theme: 'system',
});
export type ThemeProviderProps = {
/**
* The attribute name to append to document root.
*/
attribute: string;
/**
* The provider children.
*/
children?: ReactNode;
/**
* The default theme.
*
* @default 'system'
*/
defaultTheme?: Theme;
/**
* The key to use in local storage.
*/
storageKey: string;
};
export const ThemeProvider: FC<ThemeProviderProps> = ({
attribute,
children,
defaultTheme = 'system',
storageKey,
}) => {
const [theme, setTheme] = useLocalStorage(
storageKey,
defaultTheme,
themeValidator
);
const userColorScheme = useSystemColorScheme();
const resolvedTheme: Exclude<Theme, 'system'> =
theme === 'system' ? userColorScheme : theme;
const dataAttribute = getDataAttributeFrom(attribute);
useEffect(() => {
if (typeof window !== 'undefined') {
document.documentElement.setAttribute(dataAttribute, `${resolvedTheme}`);
document.documentElement.style.colorScheme = resolvedTheme;
}
return () => {
document.documentElement.removeAttribute(dataAttribute);
};
}, [dataAttribute, resolvedTheme]);
const value = useMemo(() => {
return { resolvedTheme, setTheme, theme };
}, [resolvedTheme, setTheme, theme]);
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
};
|
