Remove ThemeProvider and move Theme logic to Settings

KaffinPX · Sep 1, 2024 · fa758b9 · fa758b9
1 parent d7b785f
commit fa758b9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 96 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,28 +1,25 @@
 import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { SettingsProvider } from './contexts/Settings'
 import { KaspaProvider } from './contexts/Kaspa'
-import { ThemeProvider } from '@/components/ThemeProvider'
 import Landing from './pages/Landing'
 import CreateWallet from '@/pages/CreateWallet'
 import Wallet from '@/pages/Wallet'
 import UnlockWallet from '@/pages/Unlock'
 
 function App () {
   return (
-    <ThemeProvider>
-      <SettingsProvider>
-        <KaspaProvider>
-          <MemoryRouter>
-            <Routes>
-              <Route path="/" element={<Landing />} />
-              <Route path="/create" element={<CreateWallet />} />
-              <Route path="/unlock" element={<UnlockWallet />} />
-              <Route path="/wallet" element={<Wallet />} />
-            </Routes>
-          </MemoryRouter>
-        </KaspaProvider>
-      </SettingsProvider>
-    </ThemeProvider>
+    <SettingsProvider>
+      <KaspaProvider>
+        <MemoryRouter>
+          <Routes>
+            <Route path="/" element={<Landing />} />
+            <Route path="/create" element={<CreateWallet />} />
+            <Route path="/unlock" element={<UnlockWallet />} />
+            <Route path="/wallet" element={<Wallet />} />
+          </Routes>
+        </MemoryRouter>
+      </KaspaProvider>
+    </SettingsProvider>
   )
 }
 

diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx
diff --git a/src/contexts/Settings.tsx b/src/contexts/Settings.tsx
@@ -3,12 +3,13 @@ import { createContext, useState, type ReactNode, useEffect, useCallback } from
 
 export interface ISettings {
   version: number
+  theme: "dark" | "light" | "system"
+  currency: keyof typeof currencies
   nodes: {
     name: string
     address: string
     locked: boolean
   }[]
-  currency: keyof typeof currencies
   selectedNode: number
 }
 
@@ -18,7 +19,9 @@ export const currencies = {
 }
 
 export const defaultSettings: ISettings = {
-  version: 4,
+  version: 1,
+  theme: 'system',
+  currency: 'USD',
   nodes: [{
     name: "Public node",
     address: "mainnet",
@@ -32,8 +35,7 @@ export const defaultSettings: ISettings = {
     address: "testnet-11",
     locked: true
   }],
-  currency: 'USD',
-  selectedNode: 0
+  selectedNode: 0,
 }
 
 export const SettingsContext = createContext<{
@@ -51,6 +53,24 @@ export function SettingsProvider({ children }: {
     LocalStorage.set("settings", settings)
   }, [ settings ])
 
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove("light", "dark")
+
+    if (settings['theme'] === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light"
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(settings['theme'])
+  }, [ settings['theme'] ])
+
   const load = useCallback(async () => {
     const storedSettings = await LocalStorage.get('settings', defaultSettings)
 

diff --git a/src/pages/Wallet/Settings/General.tsx b/src/pages/Wallet/Settings/General.tsx
@@ -2,14 +2,12 @@ import { i18n } from "webextension-polyfill"
 import { Sun, Moon, Laptop } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
-import { useTheme } from "@/components/ThemeProvider"
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
 import { currencies } from "@/contexts/Settings"
 import useSettings from "@/hooks/useSettings"
 
 export default function General () {
   const { settings, updateSetting } = useSettings()
-  const theme = useTheme()
 
   return (
     <AccordionItem value="general">
@@ -23,11 +21,11 @@ export default function General () {
           <div className={"flex gap-1"}>
             <ToggleGroup
               type="single"
-              defaultValue={theme.theme}
+              defaultValue={settings.theme}
               onValueChange={(value) => {
                 if (value === "") return
 
-                theme.setTheme(value as never)
+                updateSetting('theme', value as never)
               }}
             >
               <ToggleGroupItem value="light">