[VMB-44] Implement Customizable Theme Provider Based on CSS Variables #6

messages/zh.json

@@ -173,6 +173,34 @@
         "Notification": {
           "title": "通知设置",
           "description": "管理您的通知设置"
+        },
+        "Theme": {
+          "title": "主题设置",
+          "description": "自定义浅色和深色模式的主题颜色",
+          "light": "浅色模式",
+          "dark": "深色模式",
+          "system": "系统",
+          "Colors": {
+            "background": "背景色",
+            "foreground": "前景色",
+            "muted": "柔和色",
+            "muted-foreground": "柔和前景色",
+            "popover": "弹出层背景色",
+            "popover-foreground": "弹出层前景色",
+            "card": "卡片背景色",
+            "card-foreground": "卡片前景色",
+            "border": "边框色",
+            "input": "输入框色",
+            "primary": "主色",
+            "primary-foreground": "主色前景色",
+            "secondary": "次色",
+            "secondary-foreground": "次色前景色",
+            "accent": "强调色",
+            "accent-foreground": "强调色前景色",
+            "destructive": "危险色",
+            "destructive-foreground": "危险色前景色",
+            "ring": "环形色"
+          }
         }
       }
     }

package.json

@@ -41,13 +41,14 @@
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.5",
+    "@radix-ui/react-popover": "^1.1.6",
     "@radix-ui/react-portal": "^1.1.3",
     "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-toggle-group": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.8",

src/app/dash/setting/site/theme/page.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { ColorPicker } from "@/components/derive-ui/color-picker";
+import { useTranslations } from "next-intl";
+import type { ThemeColors } from "@/providers/color/types";
+import { defaultTheme, useTheme } from "@/providers/color";
+
+export default function ThemePage() {
+  const t = useTranslations("Private.Setting.Site.Theme");
+  const { theme, setTheme } = useTheme();
+
+  const updateColor = (
+    mode: "light" | "dark",
+    key: keyof ThemeColors,
+    value: string,
+  ) => {
+    if (mode === "light") {
+      setTheme({
+        name: "custom",
+        ...theme,
+        light: { ...theme?.light, [key]: value },
+        dark: theme?.dark ?? {},
+      });
+    } else {
+      setTheme({
+        name: "custom",
+        ...theme,
+        light: theme?.light ?? {},
+        dark: { ...theme?.dark, [key]: value },
+      });
+    }
+  };
+
+  const ColorPickerRow = ({
+    colorKey,
+    value,
+    onChange,
+  }: {
+    mode: "light" | "dark";
+    colorKey: keyof ThemeColors;
+    value: string;
+    onChange: (value: string) => void;
+  }) => (
+    <div className="flex items-center justify-between py-2">
+      <div className="flex flex-col">
+        <span className="text-sm font-medium">{t(`Variables.${colorKey}`)}</span>
+        <span className="text-xs text-muted-foreground">{colorKey}</span>
+      </div>
+      <ColorPicker
+        background={value}
+        setBackground={onChange}
+        className="w-[200px]"
+      />
+    </div>
+  );
+
+  return (
+    <Tabs defaultValue="light" className="w-full">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="light">{t("light")}</TabsTrigger>
+        <TabsTrigger value="dark">{t("dark")}</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="light" className="space-y-4">
+        {Object.entries(defaultTheme.light).map(([key, value]) => (
+          <ColorPickerRow
+            key={key}
+            colorKey={key as keyof ThemeColors}
+            mode="light"
+            value={theme?.light?.[key as keyof ThemeColors] ?? value}
+            onChange={(newValue) =>
+              updateColor("light", key as keyof ThemeColors, newValue)
+            }
+          />
+        ))}
+      </TabsContent>
+
+      <TabsContent value="dark" className="space-y-4">
+        {Object.entries(defaultTheme.dark).map(([key, value]) => (
+          <ColorPickerRow
+            key={key}
+            colorKey={key as keyof ThemeColors}
+            mode="dark"
+            value={theme?.dark?.[key as keyof ThemeColors] ?? value}
+            onChange={(newValue) =>
+              updateColor("dark", key as keyof ThemeColors, newValue)
+            }
+          />
+        ))}
+      </TabsContent>
+    </Tabs>
+  );
+}

src/app/layout.tsx

@@ -15,6 +15,7 @@ import { getLocale, getMessages } from "next-intl/server";
 import { NextIntlClientProvider } from "next-intl";
 import { pickPublic } from "@/i18n/pick";
 import type { Messages } from "global";
+import { ThemeScript } from "@/providers/color/script";
 
 export const metadata: Metadata = {
   metadataBase: new URL(siteConfig.url),
@@ -70,7 +71,9 @@ export default async function RootLayout({
 
   return (
     <html lang={locale} suppressHydrationWarning>
-      <head />
+      <head>
+        <ThemeScript />
+      </head>
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",