From 72c8ed2b9575b46f6c8fea0d357a705f9c08df61 Mon Sep 17 00:00:00 2001
From: Nemenwq <chloemikka@gmail.com>
Date: Sat, 28 Mar 2026 16:22:56 +0100
Subject: [PATCH 1/2] Build theme settings page (dark/light/system) with
 persistence

---
 .../dashboard/settings/preferences/page.tsx   |  59 +++++++++-
 src/components/ClientProviders.tsx            |  13 ++-
 src/components/ThemeToggle.tsx                |  29 +++--
 src/contexts/ThemeProvider.tsx                | 101 ++++++++++++++++++
 4 files changed, 180 insertions(+), 22 deletions(-)
 create mode 100644 src/contexts/ThemeProvider.tsx

diff --git a/src/app/dashboard/settings/preferences/page.tsx b/src/app/dashboard/settings/preferences/page.tsx
index eba20dc..c9c2e3b 100644
--- a/src/app/dashboard/settings/preferences/page.tsx
+++ b/src/app/dashboard/settings/preferences/page.tsx
@@ -1,15 +1,17 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Globe, Clock, DollarSign, Save, X, AlertCircle, CheckCircle2 } from "lucide-react";
+import { Globe, Clock, DollarSign, Save, X, AlertCircle, CheckCircle2, Sun, Moon, Monitor } from "lucide-react";
 import { Button } from "@/components/ui/Button";
 import { mockAudit } from "@/lib/mock-audit";
 import { SettingsSectionSkeleton } from "@/components/ui/Skeleton";
+import { useTheme, ThemeMode } from "@/contexts/ThemeProvider";
 
 interface PreferencesData {
   locale: string;
   timezone: string;
   currencyFormat: string;
+  theme: ThemeMode;
 }
 
 const LOCALES = [
@@ -46,6 +48,7 @@ const DEFAULT: PreferencesData = {
   locale: "en-US",
   timezone: "UTC",
   currencyFormat: "USD",
+  theme: "system",
 };
 
 export default function PreferencesPage() {
@@ -162,6 +165,60 @@ export default function PreferencesPage() {
         </div>
       </div>
 
+      <div className="settings-card">
+        <div className="settings-card-header">
+          <div className="settings-card-icon">
+            <Monitor size={18} />
+          </div>
+          <div>
+            <h2 className="settings-card-title">Appearance</h2>
+            <p className="settings-card-desc">Theme and visual display preferences</p>
+          </div>
+        </div>
+
+        <div className="settings-card-body">
+          <div className="settings-field">
+            <label className="settings-label">
+              Theme
+            </label>
+            {editing ? (
+              <div className="theme-options">
+                <button
+                  type="button"
+                  onClick={() => setDraft({ ...draft, theme: "light" })}
+                  className={`theme-option ${draft.theme === "light" ? "active" : ""}`}
+                >
+                  <Sun size={16} />
+                  <span>Light</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setDraft({ ...draft, theme: "dark" })}
+                  className={`theme-option ${draft.theme === "dark" ? "active" : ""}`}
+                >
+                  <Moon size={16} />
+                  <span>Dark</span>
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setDraft({ ...draft, theme: "system" })}
+                  className={`theme-option ${draft.theme === "system" ? "active" : ""}`}
+                >
+                  <Monitor size={16} />
+                  <span>System</span>
+                </button>
+              </div>
+            ) : (
+              <p className="settings-value">
+                {saved.theme === "light" && "Light"}
+                {saved.theme === "dark" && "Dark"}
+                {saved.theme === "system" && "System"}
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+
       <div className="settings-card">
         <div className="settings-card-header">
           <div className="settings-card-icon">
diff --git a/src/components/ClientProviders.tsx b/src/components/ClientProviders.tsx
index 9eb7c8a..b91a84c 100644
--- a/src/components/ClientProviders.tsx
+++ b/src/components/ClientProviders.tsx
@@ -4,13 +4,16 @@ import { ReactNode } from "react";
 import { AuthProvider } from "@/contexts";
 import { WalletProvider } from "@/contexts";
 import { I18nProvider } from "@/contexts/I18nContext";
+import { ThemeProvider } from "@/contexts/ThemeProvider";
 
 export function ClientProviders({ children }: { children: ReactNode }) {
   return (
-    <I18nProvider>
-      <AuthProvider>
-        <WalletProvider>{children}</WalletProvider>
-      </AuthProvider>
-    </I18nProvider>
+    <ThemeProvider>
+      <I18nProvider>
+        <AuthProvider>
+          <WalletProvider>{children}</WalletProvider>
+        </AuthProvider>
+      </I18nProvider>
+    </ThemeProvider>
   );
 }
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 6ecd6c9..e23edd5 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -1,32 +1,29 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useTheme } from "@/contexts/ThemeProvider";
 
 export function ThemeToggle() {
-  const [isDark, setIsDark] = useState(true);
-
-  useEffect(() => {
-    const stored = localStorage.getItem("nw-theme");
-    const dark = stored !== "light";
-    setIsDark(dark);
-    document.documentElement.classList.toggle("dark", dark);
-  }, []);
+  const { theme, resolvedTheme, setTheme } = useTheme();
 
   function toggle() {
-    const next = !isDark;
-    setIsDark(next);
-    document.documentElement.classList.toggle("dark", next);
-    localStorage.setItem("nw-theme", next ? "dark" : "light");
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("light");
+    } else {
+      // If system, toggle to opposite of current resolved theme
+      setTheme(resolvedTheme === "light" ? "dark" : "light");
+    }
   }
 
   return (
     <button
       onClick={toggle}
       className="rounded-lg p-2 text-slate-400 hover:bg-white/5 hover:text-white transition-colors"
-      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
-      title={isDark ? "Light mode" : "Dark mode"}
+      aria-label={resolvedTheme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+      title={resolvedTheme === "dark" ? "Light mode" : "Dark mode"}
     >
-      {isDark ? (
+      {resolvedTheme === "dark" ? (
         /* sun icon */
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
new file mode 100644
index 0000000..4ec1c52
--- /dev/null
+++ b/src/contexts/ThemeProvider.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, ReactNode, useMemo } from "react";
+
+export type ThemeMode = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: ThemeMode;
+  resolvedTheme: "light" | "dark";
+  setTheme: (theme: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+const STORAGE_KEY = "nw-theme";
+
+function getStoredTheme(): ThemeMode {
+  if (typeof globalThis.window === "undefined") return "system";
+  try {
+    const stored = globalThis.window.localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  } catch {}
+  return "system";
+}
+
+function getSystemTheme(): "light" | "dark" {
+  if (typeof globalThis.window === "undefined") return "light";
+  return globalThis.window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function resolveTheme(theme: ThemeMode): "light" | "dark" {
+  if (theme === "system") {
+    return getSystemTheme();
+  }
+  return theme;
+}
+
+function applyTheme(resolvedTheme: "light" | "dark") {
+  if (typeof globalThis.window === "undefined") return;
+  const root = globalThis.window.document.documentElement;
+  root.classList.remove("light", "dark");
+  root.classList.add(resolvedTheme);
+}
+
+interface ThemeProviderProps {
+  readonly children: ReactNode;
+}
+
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<ThemeMode>(getStoredTheme);
+  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">(() => resolveTheme(theme));
+
+  const setTheme = (newTheme: ThemeMode) => {
+    setThemeState(newTheme);
+    globalThis.window?.localStorage.setItem(STORAGE_KEY, newTheme);
+    const resolved = resolveTheme(newTheme);
+    setResolvedTheme(resolved);
+    applyTheme(resolved);
+  };
+
+  useEffect(() => {
+    // Apply initial theme immediately to prevent flash
+    applyTheme(resolvedTheme);
+
+    // Listen for system theme changes if using system preference
+    if (theme === "system") {
+      const mediaQuery = globalThis.window?.matchMedia("(prefers-color-scheme: dark)");
+      if (!mediaQuery) return;
+
+      const handleChange = () => {
+        const newResolved = getSystemTheme();
+        setResolvedTheme(newResolved);
+        applyTheme(newResolved);
+      };
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+  }, [theme, resolvedTheme]);
+
+  const contextValue = useMemo(() => ({
+    theme,
+    resolvedTheme,
+    setTheme,
+  }), [theme, resolvedTheme, setTheme]);
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

From 2897a01faaba1fdd808fb46b3f162982c411311e Mon Sep 17 00:00:00 2001
From: Nemenwq <chloemikka@gmail.com>
Date: Sun, 29 Mar 2026 17:46:29 +0100
Subject: [PATCH 2/2] lint error fixed

---
 src/components/ClientProviders.tsx | 2 +-
 src/contexts/ThemeProvider.tsx     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ClientProviders.tsx b/src/components/ClientProviders.tsx
index 3a3e087..a97aa9d 100644
--- a/src/components/ClientProviders.tsx
+++ b/src/components/ClientProviders.tsx
@@ -24,6 +24,6 @@ export function ClientProviders({ children }: { children: ReactNode }) {
         </WalletProvider>
       </AuthProvider>
     </I18nProvider>
-   <ThemeProvider>
+   </ThemeProvider>
   );
 }
diff --git a/src/contexts/ThemeProvider.tsx b/src/contexts/ThemeProvider.tsx
index 4ec1c52..7d45b1a 100644
--- a/src/contexts/ThemeProvider.tsx
+++ b/src/contexts/ThemeProvider.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState, ReactNode, useMemo } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, ReactNode, useMemo } from "react";
 
 export type ThemeMode = "light" | "dark" | "system";
 
@@ -52,13 +52,13 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
   const [theme, setThemeState] = useState<ThemeMode>(getStoredTheme);
   const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">(() => resolveTheme(theme));
 
-  const setTheme = (newTheme: ThemeMode) => {
+  const setTheme = useCallback((newTheme: ThemeMode) => {
     setThemeState(newTheme);
     globalThis.window?.localStorage.setItem(STORAGE_KEY, newTheme);
     const resolved = resolveTheme(newTheme);
     setResolvedTheme(resolved);
     applyTheme(resolved);
-  };
+  }, []);
 
   useEffect(() => {
     // Apply initial theme immediately to prevent flash