src/contexts/DarkMode.tsx


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

import * as React from "react";
import {
  Context,
  createContext,
  PropsWithChildren,
  useEffect,
  useMemo,
  useState,
} from "react";
import { ThemeConfig } from "bootstrap-darkmode";

interface DarkModeApi {
  darkMode: boolean;
  toggle: () => void;
}

export const DarkModeContext = createContext<Partial<DarkModeApi>>(
  {}
) as Context<DarkModeApi>;

export default function DarkModeProvider({ children }: PropsWithChildren<any>) {
  const themeConfig = useMemo(() => new ThemeConfig(), []);
  const [darkMode, setDarkMode] = useState(
    () => themeConfig.getTheme() === "dark"
  );

  useEffect(() => {
    themeConfig.setTheme(darkMode ? "dark" : "light");
  }, [darkMode]);

  return (
    <DarkModeContext.Provider
      value={{
        darkMode,
        toggle: () => setDarkMode((dm) => !dm),
      }}
    >
      {children}
    </DarkModeContext.Provider>
  );
}