From bce59b23b4754dd617d747d8653dc8ba654ab1d6 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Fri, 27 Mar 2026 09:49:26 +0800
Subject: [PATCH] feat(dashboard): add ThemeContext with localStorage
 persistence

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../dashboard/src/themes/ThemeContext.tsx     | 101 ++++++++++++++++++
 .../packages/dashboard/src/themes/index.ts    |   5 +
 2 files changed, 106 insertions(+)
 create mode 100644 understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx
 create mode 100644 understand-anything-plugin/packages/dashboard/src/themes/index.ts

diff --git a/understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx b/understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx
new file mode 100644
index 0000000..d166e55
--- /dev/null
+++ b/understand-anything-plugin/packages/dashboard/src/themes/ThemeContext.tsx
@@ -0,0 +1,101 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import type { PresetId, ThemeConfig, ThemePreset } from "./types.ts";
+import { DEFAULT_THEME_CONFIG } from "./types.ts";
+import { getPreset } from "./presets.ts";
+import { applyTheme } from "./theme-engine.ts";
+
+const STORAGE_KEY = "ua-theme";
+
+interface ThemeContextValue {
+  config: ThemeConfig;
+  preset: ThemePreset;
+  setPreset: (presetId: PresetId) => void;
+  setAccent: (accentId: string) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+function loadFromLocalStorage(): ThemeConfig | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed.presetId === "string" && typeof parsed.accentId === "string") {
+      return parsed as ThemeConfig;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function saveToLocalStorage(config: ThemeConfig): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
+  } catch {
+    // Storage full or unavailable — ignore
+  }
+}
+
+function resolveInitialTheme(metaTheme?: ThemeConfig | null): ThemeConfig {
+  return loadFromLocalStorage() ?? metaTheme ?? DEFAULT_THEME_CONFIG;
+}
+
+interface ThemeProviderProps {
+  metaTheme?: ThemeConfig | null;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ metaTheme, children }: ThemeProviderProps) {
+  const [config, setConfig] = useState<ThemeConfig>(() => resolveInitialTheme(metaTheme));
+  const initialized = useRef(false);
+
+  // Apply theme on mount and config changes
+  useEffect(() => {
+    applyTheme(config);
+    if (initialized.current) {
+      saveToLocalStorage(config);
+    }
+    initialized.current = true;
+  }, [config]);
+
+  // Update if metaTheme arrives later (async fetch) and no localStorage preference exists
+  useEffect(() => {
+    if (metaTheme && !loadFromLocalStorage()) {
+      setConfig(metaTheme);
+    }
+  }, [metaTheme]);
+
+  const setPreset = useCallback((presetId: PresetId) => {
+    setConfig((prev) => {
+      const newPreset = getPreset(presetId);
+      return { presetId, accentId: newPreset.defaultAccentId };
+    });
+  }, []);
+
+  const setAccent = useCallback((accentId: string) => {
+    setConfig((prev) => ({ ...prev, accentId }));
+  }, []);
+
+  const preset = getPreset(config.presetId);
+
+  return (
+    <ThemeContext.Provider value={{ config, preset, setPreset, setAccent }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeContextValue {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}
diff --git a/understand-anything-plugin/packages/dashboard/src/themes/index.ts b/understand-anything-plugin/packages/dashboard/src/themes/index.ts
new file mode 100644
index 0000000..c033d59
--- /dev/null
+++ b/understand-anything-plugin/packages/dashboard/src/themes/index.ts
@@ -0,0 +1,5 @@
+export { ThemeProvider, useTheme } from "./ThemeContext.tsx";
+export { PRESETS, getPreset, getAccent } from "./presets.ts";
+export { applyTheme } from "./theme-engine.ts";
+export type { PresetId, ThemeConfig, ThemePreset, AccentSwatch } from "./types.ts";
+export { DEFAULT_THEME_CONFIG } from "./types.ts";