Fixed issue with json viewer

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 @@
+import * as React from "react";
+import {
+  Context,
+  createContext,
+  ReactElement,
+  ReactNode, 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>;
+interface DarkModeProviderProps {
+  children: ReactNode
+}
+
+export default function DarkModeProvider({ children }: DarkModeProviderProps) {
+  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>
+  )
+}