summaryrefslogtreecommitdiffstats
path: root/src/contexts
diff options
context:
space:
mode:
Diffstat (limited to 'src/contexts')
-rw-r--r--src/contexts/DarkMode.tsx41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
new file mode 100644
index 0000000..6dc1c31
--- /dev/null
+++ b/src/contexts/DarkMode.tsx
@@ -0,0 +1,41 @@
1import * as React from "react";
2import {
3 Context,
4 createContext,
5 ReactElement,
6 ReactNode, useEffect,
7 useMemo,
8 useState
9} from "react";
10import {ThemeConfig} from "bootstrap-darkmode";
11
12interface DarkModeApi {
13 darkMode: boolean
14 toggle: () => void
15}
16
17export const DarkModeContext = createContext<Partial<DarkModeApi>>({}) as Context<DarkModeApi>;
18interface DarkModeProviderProps {
19 children: ReactNode
20}
21
22export default function DarkModeProvider({ children }: DarkModeProviderProps) {
23 const themeConfig = useMemo(() => new ThemeConfig(), []);
24 const [darkMode, setDarkMode] = useState(() => themeConfig.getTheme() === 'dark')
25
26 useEffect(() => {
27 themeConfig.setTheme(darkMode ? 'dark' : 'light');
28 }, [darkMode])
29
30 return (
31 <DarkModeContext.Provider
32 value={{
33 darkMode,
34 toggle: () => setDarkMode(dm => !dm),
35 }}
36 >
37
38 {children}
39 </DarkModeContext.Provider>
40 )
41}