From f69a7786da3ba21373574ee6c96371769a72ac42 Mon Sep 17 00:00:00 2001
From: Tom van der Lee <tom@vanderlee.io>
Date: Tue, 25 Jan 2022 22:03:00 +0100
Subject: Fixed issue with json viewer

---
 src/contexts/DarkMode.tsx | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/contexts/DarkMode.tsx

(limited to 'src/contexts/DarkMode.tsx')

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>
+  )
+}
-- 
cgit v1.2.3