diff options
Diffstat (limited to 'src/contexts')
| -rw-r--r-- | src/contexts/DarkMode.tsx | 41 |
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 @@ | |||
| 1 | import * as React from "react"; | ||
| 2 | import { | ||
| 3 | Context, | ||
| 4 | createContext, | ||
| 5 | ReactElement, | ||
| 6 | ReactNode, useEffect, | ||
| 7 | useMemo, | ||
| 8 | useState | ||
| 9 | } from "react"; | ||
| 10 | import {ThemeConfig} from "bootstrap-darkmode"; | ||
| 11 | |||
| 12 | interface DarkModeApi { | ||
| 13 | darkMode: boolean | ||
| 14 | toggle: () => void | ||
| 15 | } | ||
| 16 | |||
| 17 | export const DarkModeContext = createContext<Partial<DarkModeApi>>({}) as Context<DarkModeApi>; | ||
| 18 | interface DarkModeProviderProps { | ||
| 19 | children: ReactNode | ||
| 20 | } | ||
| 21 | |||
| 22 | export 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 | } | ||
