feat: add skin palette customization and update settings UI

Author: PythonSmall-Q

src/App.tsx

@@ -7,6 +7,7 @@ import MainApp from "./MainApp";
 import WidgetWindow from "./widgets/WidgetWindow";
 import { useSettingsStore } from "./stores/settingsStore";
 import { AnnouncerProvider } from "@/components/Announcer";
+import { getSkinPalette } from "@/utils/skinPalettes";
 
 /**
  * Root component. Decides whether to render the main dashboard or a widget,
@@ -25,6 +26,8 @@ export default function App() {
   const widgetBackgroundFit = useSettingsStore((s) => s.widgetBackgroundFit);
   const appBackgroundOverlay = useSettingsStore((s) => s.appBackgroundOverlay);
   const widgetBackgroundOverlay = useSettingsStore((s) => s.widgetBackgroundOverlay);
+  const skinPalette = useSettingsStore((s) => s.skinPalette);
+  const [activePalette, setActivePalette] = useState(skinPalette);
   const reducedMotion = useSettingsStore((s) => s.reducedMotion);
   const compactWidgets = useSettingsStore((s) => s.compactWidgets);
   const [skin, setSkin] = useState({
@@ -36,6 +39,10 @@ export default function App() {
     widgetOverlay: widgetBackgroundOverlay,
   });
 
+  useEffect(() => {
+    setActivePalette(skinPalette);
+  }, [skinPalette]);
+
   useEffect(() => {
     try {
       const label = getCurrentWebviewWindow().label;
@@ -93,7 +100,7 @@ export default function App() {
 
   useEffect(() => {
     let unlisten: (() => void) | undefined;
-    listen<Partial<typeof skin> & { appBackgroundImage?: string; widgetBackgroundImage?: string }>("timelens-skin-changed", (event) => {
+    listen<Partial<typeof skin> & { appBackgroundImage?: string; widgetBackgroundImage?: string; skinPalette?: typeof skinPalette }>("timelens-skin-changed", (event) => {
       setSkin((previous) => ({
         app: event.payload?.app ?? event.payload?.appBackgroundImage ?? previous.app,
         widget: event.payload?.widget ?? event.payload?.widgetBackgroundImage ?? previous.widget,
@@ -102,6 +109,9 @@ export default function App() {
         appOverlay: event.payload?.appOverlay ?? previous.appOverlay,
         widgetOverlay: event.payload?.widgetOverlay ?? previous.widgetOverlay,
       }));
+      if (event.payload?.skinPalette) {
+        setActivePalette(event.payload.skinPalette);
+      }
     }).then((cleanup) => { unlisten = cleanup; }).catch(() => {});
     return () => unlisten?.();
   }, []);
@@ -116,7 +126,19 @@ export default function App() {
     root.style.setProperty("--timelens-widget-background-fit", skin.widgetFit === "stretch" ? "100% 100%" : skin.widgetFit);
     root.style.setProperty("--timelens-app-overlay", skin.app ? String(skin.appOverlay / 100) : "0");
     root.style.setProperty("--timelens-widget-overlay", skin.widget ? String(skin.widgetOverlay / 100) : "0");
-  }, [skin]);
+    const palette = getSkinPalette(activePalette);
+    const paletteVars: Record<string, string> = {
+      "--app-bg": palette.appBg, "--surface": palette.surface, "--surface-light": palette.surfaceLight,
+      "--surface-card": palette.surfaceCard, "--surface-hover": palette.surfaceHover, "--surface-border": palette.surfaceBorder,
+      "--text-primary": palette.textPrimary, "--text-secondary": palette.textSecondary, "--text-muted": palette.textMuted,
+      "--accent-blue": palette.accentBlue, "--accent-purple": palette.accentPurple, "--accent-teal": palette.accentTeal,
+      "--accent-green": palette.accentGreen, "--accent-red": palette.accentRed, "--accent-orange": palette.accentOrange,
+    };
+    Object.entries(paletteVars).forEach(([name, value]) => {
+      if (activePalette === "default") root.style.removeProperty(name);
+      else root.style.setProperty(name, value);
+    });
+  }, [activePalette, skin]);
 
   if (windowLabel !== "main") {
     return <WidgetWindow widgetId={windowLabel} />;

src/i18n/locales/en/settings.json

@@ -37,6 +37,8 @@
     "system": "System"
   },
   "skin": {
+    "palette": "Color palette",
+    "palettes": { "default": "Default", "ocean": "Ocean", "forest": "Forest", "sunset": "Sunset", "monochrome": "Monochrome" },
     "appBackground": "TimeLens background",
     "widgetBackground": "Widget background",
     "choose": "Choose image",

src/i18n/locales/zh-CN/settings.json

@@ -37,6 +37,8 @@
     "system": "跟随系统"
   },
   "skin": {
+    "palette": "调色板",
+    "palettes": { "default": "默认", "ocean": "海洋", "forest": "森林", "sunset": "夕阳", "monochrome": "黑白" },
     "appBackground": "TimeLens 背景图片",
     "widgetBackground": "小组件背景图片",
     "choose": "选择图片",

src/i18n/locales/zh-TW/settings.json

@@ -37,6 +37,8 @@
     "system": "跟隨系統"
   },
   "skin": {
+    "palette": "調色盤",
+    "palettes": { "default": "預設", "ocean": "海洋", "forest": "森林", "sunset": "夕陽", "monochrome": "黑白" },
     "appBackground": "TimeLens 背景圖片",
     "widgetBackground": "小元件背景圖片",
     "choose": "選擇圖片",

src/pages/Settings/index.tsx

@@ -5,7 +5,7 @@ import { convertFileSrc } from "@tauri-apps/api/core";
 import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
 import { useSettingsStore } from "@/stores/settingsStore";
 import LanguageSwitcher from "@/components/LanguageSwitcher";
-import { Moon, Sun, Activity, Database, Info, Rocket, Keyboard, PanelsTopLeft, ArrowLeft, Search, Lock, Copy, RotateCw, User, Shield, Droplet, Sparkles, Image } from "lucide-react";
+import { Moon, Sun, Activity, Database, Info, Rocket, Keyboard, PanelsTopLeft, ArrowLeft, Search, Lock, Copy, RotateCw, User, Shield, Droplet, Sparkles, Image, Palette } from "lucide-react";
 import clsx from "clsx";
 import * as api from "@/services/tauriApi";
 import { APP_VERSION } from "../../version";
@@ -39,6 +39,7 @@ import BackupSection from "./BackupSection";
 import LlmSettings from "./LlmSettings";
 
 import SettingsCard from "./SettingsCard";
+import { SKIN_PALETTES, type SkinPaletteId } from "@/utils/skinPalettes";
 
 function SettingsRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
@@ -185,12 +186,14 @@ export default function Settings() {
     widgetBackgroundFit,
     appBackgroundOverlay,
     widgetBackgroundOverlay,
+    skinPalette,
     setAppBackgroundImage,
     setWidgetBackgroundImage,
     setAppBackgroundFit,
     setWidgetBackgroundFit,
     setAppBackgroundOverlay,
     setWidgetBackgroundOverlay,
+    setSkinPalette,
     monitoringActive,
     setMonitoringActive,
     samplingIntervalMs,
@@ -261,6 +264,11 @@ export default function Settings() {
     });
   };
 
+  const updatePalette = (palette: SkinPaletteId) => {
+    setSkinPalette(palette);
+    void emit("timelens-skin-changed", { skinPalette: palette });
+  };
+
   const chooseSkinImage = async (kind: "app" | "widget") => {
     try {
       const selected = await openFileDialog({
@@ -931,6 +939,28 @@ export default function Settings() {
             ))}
           </div>
         </SettingsRow>
+        <SettingsRow label={t("skin.palette")}>
+          <div className="flex flex-wrap justify-end gap-2">
+            {SKIN_PALETTES.map((palette) => (
+              <button
+                key={palette.id}
+                onClick={() => updatePalette(palette.id)}
+                title={t(`skin.palettes.${palette.id}`)}
+                aria-label={t(`skin.palettes.${palette.id}`)}
+                className={clsx(
+                  "flex items-center gap-1.5 rounded-lg border px-2 py-1.5 text-xs transition-colors",
+                  skinPalette === palette.id ? "border-accent-blue bg-accent-blue/15 text-accent-blue" : "border-surface-border text-text-muted hover:text-text-secondary"
+                )}
+              >
+                <Palette size={12} />
+                <span>{t(`skin.palettes.${palette.id}`)}</span>
+                <span className="flex gap-0.5" aria-hidden="true">
+                  {[palette.accentBlue, palette.accentTeal, palette.accentOrange].map((color) => <span key={color} className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />)}
+                </span>
+              </button>
+            ))}
+          </div>
+        </SettingsRow>
         <SettingsRow label={t("accessibility.reducedMotion")}>
           <input type="checkbox" className="ui-checkbox" checked={reducedMotion} onChange={(event) => setReducedMotion(event.target.checked)} aria-label={t("accessibility.reducedMotion")} />
         </SettingsRow>

src/stores/settingsStore.ts

@@ -2,6 +2,7 @@ import { create } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 import i18n from "@/i18n/config";
 import * as api from "@/services/tauriApi";
+import type { SkinPaletteId } from "@/utils/skinPalettes";
 
 const safeSettingsStorage = createJSONStorage(() => ({
   getItem: (name: string) => {
@@ -28,6 +29,7 @@ interface SettingsState {
   widgetBackgroundFit: "cover" | "contain" | "stretch";
   appBackgroundOverlay: number;
   widgetBackgroundOverlay: number;
+  skinPalette: SkinPaletteId;
   updateMode: "off" | "notify" | "auto";
   monitoringActive: boolean;
   samplingIntervalMs: number;
@@ -52,6 +54,7 @@ interface SettingsState {
   setWidgetBackgroundFit: (fit: "cover" | "contain" | "stretch") => void;
   setAppBackgroundOverlay: (value: number) => void;
   setWidgetBackgroundOverlay: (value: number) => void;
+  setSkinPalette: (palette: SkinPaletteId) => void;
   setUpdateMode: (mode: "off" | "notify" | "auto") => void;
   setMonitoringActive: (active: boolean) => Promise<void>;
   setSamplingInterval: (ms: number) => void;
@@ -81,6 +84,7 @@ export const useSettingsStore = create<SettingsState>()(
       widgetBackgroundFit: "cover",
       appBackgroundOverlay: 62,
       widgetBackgroundOverlay: 62,
+      skinPalette: "default",
       updateMode: "notify",
       monitoringActive: true,
       samplingIntervalMs: 1000,
@@ -118,6 +122,8 @@ export const useSettingsStore = create<SettingsState>()(
 
       setWidgetBackgroundOverlay: (value) => set({ widgetBackgroundOverlay: Math.max(0, Math.min(90, value)) }),
 
+      setSkinPalette: (skinPalette) => set({ skinPalette }),
+
       setUpdateMode: (updateMode) => set({ updateMode }),
 
       setMonitoringActive: (monitoringActive) => {

src/styles/globals.css

@@ -216,6 +216,19 @@ html.compact-widgets .widget-root {
   color: var(--text-muted) !important;
 }
 
+.text-accent-blue { color: var(--accent-blue) !important; }
+.text-accent-purple { color: var(--accent-purple) !important; }
+.text-accent-teal { color: var(--accent-teal) !important; }
+.text-accent-green { color: var(--accent-green) !important; }
+.text-accent-red { color: var(--accent-red) !important; }
+.text-accent-orange { color: var(--accent-orange) !important; }
+.bg-accent-blue { background-color: var(--accent-blue) !important; }
+.bg-accent-green { background-color: var(--accent-green) !important; }
+.bg-accent-red { background-color: var(--accent-red) !important; }
+.border-accent-blue { border-color: var(--accent-blue) !important; }
+.border-accent-green { border-color: var(--accent-green) !important; }
+.border-accent-red { border-color: var(--accent-red) !important; }
+
 .hover\:bg-surface-hover:hover {
   background-color: var(--surface-hover) !important;
 }

src/utils/skinPalettes.ts

@@ -0,0 +1,42 @@
+export type SkinPaletteId = "default" | "ocean" | "forest" | "sunset" | "monochrome";
+
+export interface SkinPalette {
+  id: SkinPaletteId;
+  appBg: string;
+  surface: string;
+  surfaceLight: string;
+  surfaceCard: string;
+  surfaceHover: string;
+  surfaceBorder: string;
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  accentBlue: string;
+  accentPurple: string;
+  accentTeal: string;
+  accentGreen: string;
+  accentRed: string;
+  accentOrange: string;
+}
+
+export const SKIN_PALETTES: SkinPalette[] = [
+  {
+    id: "default", appBg: "#141824", surface: "#1e2433", surfaceLight: "#262d3d", surfaceCard: "#283043", surfaceHover: "#323b52", surfaceBorder: "#3a445c", textPrimary: "#e8edf7", textSecondary: "#aeb8ca", textMuted: "#7e8aa1", accentBlue: "#6c8ebf", accentPurple: "#8b6cbf", accentTeal: "#4ea5a0", accentGreen: "#4caf7d", accentRed: "#e05555", accentOrange: "#e09050",
+  },
+  {
+    id: "ocean", appBg: "#0c1d2a", surface: "#123047", surfaceLight: "#17415b", surfaceCard: "#1b4b66", surfaceHover: "#23617d", surfaceBorder: "#327b96", textPrimary: "#e5f7ff", textSecondary: "#a8d6e5", textMuted: "#78aabd", accentBlue: "#43b7d8", accentPurple: "#8b9de9", accentTeal: "#35c3b0", accentGreen: "#65d69a", accentRed: "#ef7777", accentOrange: "#e9a15c",
+  },
+  {
+    id: "forest", appBg: "#132019", surface: "#1c3026", surfaceLight: "#294235", surfaceCard: "#31513f", surfaceHover: "#3c624b", surfaceBorder: "#527963", textPrimary: "#edf8ed", textSecondary: "#b9d3bd", textMuted: "#89a78f", accentBlue: "#70b8c5", accentPurple: "#b29ad2", accentTeal: "#55c39c", accentGreen: "#8bd05f", accentRed: "#e87575", accentOrange: "#e4a65f",
+  },
+  {
+    id: "sunset", appBg: "#261a20", surface: "#39232b", surfaceLight: "#4b2b35", surfaceCard: "#5a3540", surfaceHover: "#6e414c", surfaceBorder: "#8a5960", textPrimary: "#fff1e8", textSecondary: "#e2bdaf", textMuted: "#bb8f86", accentBlue: "#79b6d5", accentPurple: "#c494d6", accentTeal: "#65c3b0", accentGreen: "#9ace76", accentRed: "#f07b72", accentOrange: "#f2a45c",
+  },
+  {
+    id: "monochrome", appBg: "#151515", surface: "#232323", surfaceLight: "#303030", surfaceCard: "#3b3b3b", surfaceHover: "#4a4a4a", surfaceBorder: "#626262", textPrimary: "#f4f4f4", textSecondary: "#c7c7c7", textMuted: "#999999", accentBlue: "#d1d1d1", accentPurple: "#b8b8b8", accentTeal: "#ababab", accentGreen: "#c8c8c8", accentRed: "#ef8c8c", accentOrange: "#e0b27f",
+  },
+];
+
+export function getSkinPalette(id: SkinPaletteId): SkinPalette {
+  return SKIN_PALETTES.find((palette) => palette.id === id) ?? SKIN_PALETTES[0];
+}