summaryrefslogtreecommitdiffstats
path: root/src/contexts/DarkMode.tsx
diff options
context:
space:
mode:
authorGravatar Tom van der Lee <tom@vanderlee.io>2022-02-12 11:33:52 +0100
committerGravatar Tom van der Lee <tom@vanderlee.io>2022-02-12 11:33:52 +0100
commit871a85d9343cf49646d13dc455c062efadcb959a (patch)
tree7d36b14b237719901d71d58c88f74b87b875ee61 /src/contexts/DarkMode.tsx
parent7c48533571e9f9d3731a59433a56cc8d6e008123 (diff)
downloadclient-1.3.0.tar.gz
client-1.3.0.tar.bz2
client-1.3.0.zip
Beatified codev1.3.0
Diffstat (limited to 'src/contexts/DarkMode.tsx')
-rw-r--r--src/contexts/DarkMode.tsx30
1 files changed, 17 insertions, 13 deletions
diff --git a/src/contexts/DarkMode.tsx b/src/contexts/DarkMode.tsx
index 6dc1c31..90278ff 100644
--- a/src/contexts/DarkMode.tsx
+++ b/src/contexts/DarkMode.tsx
@@ -3,39 +3,43 @@ import {
3 Context, 3 Context,
4 createContext, 4 createContext,
5 ReactElement, 5 ReactElement,
6 ReactNode, useEffect, 6 ReactNode,
7 useEffect,
7 useMemo, 8 useMemo,
8 useState 9 useState,
9} from "react"; 10} from "react";
10import {ThemeConfig} from "bootstrap-darkmode"; 11import { ThemeConfig } from "bootstrap-darkmode";
11 12
12interface DarkModeApi { 13interface DarkModeApi {
13 darkMode: boolean 14 darkMode: boolean;
14 toggle: () => void 15 toggle: () => void;
15} 16}
16 17
17export const DarkModeContext = createContext<Partial<DarkModeApi>>({}) as Context<DarkModeApi>; 18export const DarkModeContext = createContext<Partial<DarkModeApi>>(
19 {}
20) as Context<DarkModeApi>;
18interface DarkModeProviderProps { 21interface DarkModeProviderProps {
19 children: ReactNode 22 children: ReactNode;
20} 23}
21 24
22export default function DarkModeProvider({ children }: DarkModeProviderProps) { 25export default function DarkModeProvider({ children }: DarkModeProviderProps) {
23 const themeConfig = useMemo(() => new ThemeConfig(), []); 26 const themeConfig = useMemo(() => new ThemeConfig(), []);
24 const [darkMode, setDarkMode] = useState(() => themeConfig.getTheme() === 'dark') 27 const [darkMode, setDarkMode] = useState(
28 () => themeConfig.getTheme() === "dark"
29 );
25 30
26 useEffect(() => { 31 useEffect(() => {
27 themeConfig.setTheme(darkMode ? 'dark' : 'light'); 32 themeConfig.setTheme(darkMode ? "dark" : "light");
28 }, [darkMode]) 33 }, [darkMode]);
29 34
30 return ( 35 return (
31 <DarkModeContext.Provider 36 <DarkModeContext.Provider
32 value={{ 37 value={{
33 darkMode, 38 darkMode,
34 toggle: () => setDarkMode(dm => !dm), 39 toggle: () => setDarkMode((dm) => !dm),
35 }} 40 }}
36 > 41 >
37
38 {children} 42 {children}
39 </DarkModeContext.Provider> 43 </DarkModeContext.Provider>
40 ) 44 );
41} 45}