diff options
| author | 2022-02-12 11:33:52 +0100 | |
|---|---|---|
| committer | 2022-02-12 11:33:52 +0100 | |
| commit | 871a85d9343cf49646d13dc455c062efadcb959a (patch) | |
| tree | 7d36b14b237719901d71d58c88f74b87b875ee61 /src/contexts/DarkMode.tsx | |
| parent | 7c48533571e9f9d3731a59433a56cc8d6e008123 (diff) | |
| download | client-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.tsx | 30 |
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"; |
| 10 | import {ThemeConfig} from "bootstrap-darkmode"; | 11 | import { ThemeConfig } from "bootstrap-darkmode"; |
| 11 | 12 | ||
| 12 | interface DarkModeApi { | 13 | interface DarkModeApi { |
| 13 | darkMode: boolean | 14 | darkMode: boolean; |
| 14 | toggle: () => void | 15 | toggle: () => void; |
| 15 | } | 16 | } |
| 16 | 17 | ||
| 17 | export const DarkModeContext = createContext<Partial<DarkModeApi>>({}) as Context<DarkModeApi>; | 18 | export const DarkModeContext = createContext<Partial<DarkModeApi>>( |
| 19 | {} | ||
| 20 | ) as Context<DarkModeApi>; | ||
| 18 | interface DarkModeProviderProps { | 21 | interface DarkModeProviderProps { |
| 19 | children: ReactNode | 22 | children: ReactNode; |
| 20 | } | 23 | } |
| 21 | 24 | ||
| 22 | export default function DarkModeProvider({ children }: DarkModeProviderProps) { | 25 | export 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 | } |
