From 7915a913c925d5cf3bc9b6f912ed8be673135463 Mon Sep 17 00:00:00 2001
From: xmanrui <841206367@qq.com>
Date: Mon, 23 Feb 2026 07:09:45 +0800
Subject: [PATCH] feat: add dark/light theme toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add light theme CSS variables in globals.css
- Create ThemeProvider with localStorage persistence (lib/theme.tsx)
- Add ThemeSwitcher button (☀️/🌙) to sidebar
- Wrap app with ThemeProvider in providers.tsx
---
 app/globals.css   | 12 +++++++++
 app/providers.tsx |  7 +++++-
 app/sidebar.tsx   |  2 ++
 lib/theme.tsx     | 62 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 lib/theme.tsx

diff --git a/app/globals.css b/app/globals.css
index 571302f..c25300b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -12,6 +12,18 @@
   --orange: #fb923c;
 }
 
+[data-theme="light"] {
+  --bg: #f8fafc;
+  --card: #ffffff;
+  --border: #e2e8f0;
+  --text: #0f172a;
+  --text-muted: #64748b;
+  --accent: #0284c7;
+  --accent2: #7c3aed;
+  --green: #16a34a;
+  --orange: #ea580c;
+}
+
 body {
   background: var(--bg);
   color: var(--text);
diff --git a/app/providers.tsx b/app/providers.tsx
index 418faa2..421abe1 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,8 +1,13 @@
 "use client";
 
 import { I18nProvider } from "@/lib/i18n";
+import { ThemeProvider } from "@/lib/theme";
 import { ReactNode } from "react";
 
 export function Providers({ children }: { children: ReactNode }) {
-  return <I18nProvider>{children}</I18nProvider>;
+  return (
+    <ThemeProvider>
+      <I18nProvider>{children}</I18nProvider>
+    </ThemeProvider>
+  );
 }
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
index 1bda7cc..3cd8925 100644
--- a/app/sidebar.tsx
+++ b/app/sidebar.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useI18n, LanguageSwitcher } from "@/lib/i18n";
+import { ThemeSwitcher } from "@/lib/theme";
 
 const NAV_ITEMS = [
   {
@@ -65,6 +66,7 @@ export function Sidebar() {
               </Link>
               <div className="flex items-center gap-2">
                 <LanguageSwitcher />
+                <ThemeSwitcher />
                 <button
                   onClick={() => setCollapsed(true)}
                   className="text-[var(--text-muted)] hover:text-[var(--text)] transition-colors text-lg"
diff --git a/lib/theme.tsx b/lib/theme.tsx
new file mode 100644
index 0000000..d11534c
--- /dev/null
+++ b/lib/theme.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import { createContext, useContext, useState, useCallback, useEffect, ReactNode } from "react";
+
+export type Theme = "dark" | "light";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (t: Theme) => void;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+  theme: "dark",
+  setTheme: () => {},
+  toggleTheme: () => {},
+});
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>("dark");
+
+  useEffect(() => {
+    const saved = localStorage.getItem("theme") as Theme;
+    if (saved === "light" || saved === "dark") {
+      setThemeState(saved);
+      document.documentElement.setAttribute("data-theme", saved);
+    }
+  }, []);
+
+  const setTheme = useCallback((t: Theme) => {
+    setThemeState(t);
+    document.documentElement.setAttribute("data-theme", t);
+    localStorage.setItem("theme", t);
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+
+export function ThemeSwitcher() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <button
+      onClick={toggleTheme}
+      className="px-2 py-1.5 rounded-lg bg-[var(--bg)] border border-[var(--border)] text-sm hover:border-[var(--accent)] transition cursor-pointer"
+      title={theme === "dark" ? "切换到亮色模式" : "切换到暗色模式"}
+    >
+      {theme === "dark" ? "☀️" : "🌙"}
+    </button>
+  );
+}