feat: add gradient effects settings and enhance theme customization options

Author: catlog22

ccw/frontend/src/components/shared/ThemeSelector.tsx

@@ -20,7 +20,21 @@ import { generateThemeFromHue } from '@/lib/colorGenerator';
  */
 export function ThemeSelector() {
   const { formatMessage } = useIntl();
-  const { colorScheme, resolvedTheme, customHue, isCustomTheme, setColorScheme, setTheme, setCustomHue } = useTheme();
+  const {
+    colorScheme,
+    resolvedTheme,
+    customHue,
+    isCustomTheme,
+    gradientLevel,
+    enableHoverGlow,
+    enableBackgroundAnimation,
+    setColorScheme,
+    setTheme,
+    setCustomHue,
+    setGradientLevel,
+    setEnableHoverGlow,
+    setEnableBackgroundAnimation,
+  } = useTheme();
 
   // Local state for preview hue (uncommitted changes)
   const [previewHue, setPreviewHue] = useState<number | null>(customHue);
@@ -251,6 +265,74 @@ export function ThemeSelector() {
         </div>
       )}
 
+      {/* Gradient Effects Settings */}
+      <div>
+        <h3 className="text-sm font-medium text-text mb-3">
+          {formatMessage({ id: 'theme.gradient.title' })}
+        </h3>
+
+        {/* Gradient Level Selection */}
+        <div className="space-y-4">
+          <div
+            className="flex gap-2"
+            role="radiogroup"
+            aria-label={formatMessage({ id: 'theme.gradient.title' })}
+          >
+            {(['off', 'standard', 'enhanced'] as const).map((level) => (
+              <button
+                key={level}
+                onClick={() => setGradientLevel(level)}
+                role="radio"
+                aria-checked={gradientLevel === level}
+                className={`
+                  flex-1 px-3 py-2 rounded-lg text-sm font-medium
+                  transition-all duration-200 border-2
+                  ${gradientLevel === level
+                    ? 'border-accent bg-surface shadow-md'
+                    : 'border-border bg-bg hover:bg-surface'
+                  }
+                  focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
+                `}
+              >
+                {formatMessage({ id: `theme.gradient.${level}` })}
+              </button>
+            ))}
+          </div>
+
+          {/* Hover Glow Checkbox */}
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={enableHoverGlow}
+              onChange={(e) => setEnableHoverGlow(e.target.checked)}
+              className="
+                w-4 h-4 rounded border-border text-accent
+                focus:ring-2 focus:ring-accent focus:ring-offset-2
+              "
+            />
+            <span className="text-sm text-text">
+              {formatMessage({ id: 'theme.gradient.hoverGlow' })}
+            </span>
+          </label>
+
+          {/* Background Animation Checkbox */}
+          <label className="flex items-center gap-3 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={enableBackgroundAnimation}
+              onChange={(e) => setEnableBackgroundAnimation(e.target.checked)}
+              className="
+                w-4 h-4 rounded border-border text-accent
+                focus:ring-2 focus:ring-accent focus:ring-offset-2
+              "
+            />
+            <span className="text-sm text-text">
+              {formatMessage({ id: 'theme.gradient.bgAnimation' })}
+            </span>
+          </label>
+        </div>
+      </div>
+
       {/* Theme Mode Selection */}
       <div>
         <h3 className="text-sm font-medium text-text mb-3">

ccw/frontend/src/hooks/useTheme.ts

@@ -4,8 +4,17 @@
 // Convenient hook for theme management with multi-color scheme support
 
 import { useCallback } from 'react';
-import { useAppStore, selectTheme, selectResolvedTheme, selectCustomHue, selectIsCustomTheme } from '../stores/appStore';
-import type { Theme, ColorScheme } from '../types/store';
+import {
+  useAppStore,
+  selectTheme,
+  selectResolvedTheme,
+  selectCustomHue,
+  selectIsCustomTheme,
+  selectGradientLevel,
+  selectEnableHoverGlow,
+  selectEnableBackgroundAnimation,
+} from '../stores/appStore';
+import type { Theme, ColorScheme, GradientLevel } from '../types/store';
 
 export interface UseThemeReturn {
   /** Current theme preference ('light', 'dark', 'system') */
@@ -20,6 +29,12 @@ export interface UseThemeReturn {
   customHue: number | null;
   /** Whether the current theme is a custom theme */
   isCustomTheme: boolean;
+  /** Gradient level: 'off', 'standard', or 'enhanced' */
+  gradientLevel: GradientLevel;
+  /** Whether hover glow effects are enabled */
+  enableHoverGlow: boolean;
+  /** Whether background gradient animation is enabled */
+  enableBackgroundAnimation: boolean;
   /** Set theme preference */
   setTheme: (theme: Theme) => void;
   /** Set color scheme */
@@ -28,6 +43,12 @@ export interface UseThemeReturn {
   setCustomHue: (hue: number | null) => void;
   /** Toggle between light and dark (ignores system) */
   toggleTheme: () => void;
+  /** Set gradient level */
+  setGradientLevel: (level: GradientLevel) => void;
+  /** Set hover glow enabled */
+  setEnableHoverGlow: (enabled: boolean) => void;
+  /** Set background animation enabled */
+  setEnableBackgroundAnimation: (enabled: boolean) => void;
 }
 
 /**
@@ -54,10 +75,16 @@ export function useTheme(): UseThemeReturn {
   const colorScheme = useAppStore((state) => state.colorScheme);
   const customHue = useAppStore(selectCustomHue);
   const isCustomTheme = useAppStore(selectIsCustomTheme);
+  const gradientLevel = useAppStore(selectGradientLevel);
+  const enableHoverGlow = useAppStore(selectEnableHoverGlow);
+  const enableBackgroundAnimation = useAppStore(selectEnableBackgroundAnimation);
   const setThemeAction = useAppStore((state) => state.setTheme);
   const setColorSchemeAction = useAppStore((state) => state.setColorScheme);
   const setCustomHueAction = useAppStore((state) => state.setCustomHue);
   const toggleThemeAction = useAppStore((state) => state.toggleTheme);
+  const setGradientLevelAction = useAppStore((state) => state.setGradientLevel);
+  const setEnableHoverGlowAction = useAppStore((state) => state.setEnableHoverGlow);
+  const setEnableBackgroundAnimationAction = useAppStore((state) => state.setEnableBackgroundAnimation);
 
   const setTheme = useCallback(
     (newTheme: Theme) => {
@@ -84,16 +111,43 @@ export function useTheme(): UseThemeReturn {
     toggleThemeAction();
   }, [toggleThemeAction]);
 
+  const setGradientLevel = useCallback(
+    (level: GradientLevel) => {
+      setGradientLevelAction(level);
+    },
+    [setGradientLevelAction]
+  );
+
+  const setEnableHoverGlow = useCallback(
+    (enabled: boolean) => {
+      setEnableHoverGlowAction(enabled);
+    },
+    [setEnableHoverGlowAction]
+  );
+
+  const setEnableBackgroundAnimation = useCallback(
+    (enabled: boolean) => {
+      setEnableBackgroundAnimationAction(enabled);
+    },
+    [setEnableBackgroundAnimationAction]
+  );
+
   return {
     theme,
     resolvedTheme,
     isDark: resolvedTheme === 'dark',
     colorScheme,
     customHue,
     isCustomTheme,
+    gradientLevel,
+    enableHoverGlow,
+    enableBackgroundAnimation,
     setTheme,
     setColorScheme,
     setCustomHue,
     toggleTheme,
+    setGradientLevel,
+    setEnableHoverGlow,
+    setEnableBackgroundAnimation,
   };
 }

ccw/frontend/src/index.css

@@ -433,3 +433,105 @@
 .animate-spin {
   animation: spin 1s linear infinite;
 }
+
+/* ===========================
+   Gradient Effects System
+   Conditional styles based on data attributes
+   =========================== */
+
+/* Disable gradients when off */
+[data-gradient="off"] .bg-gradient-primary,
+[data-gradient="off"] .bg-gradient-brand,
+[data-gradient="off"] .bg-gradient-accent {
+  background-image: none !important;
+  background: inherit;
+}
+
+[data-gradient="off"] .gradient-text {
+  background-image: none !important;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  -webkit-text-fill-color: inherit;
+}
+
+/* Standard gradients (default) */
+[data-gradient="standard"] .bg-gradient-primary {
+  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
+}
+
+[data-gradient="standard"] .bg-gradient-brand {
+  background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
+}
+
+[data-gradient="standard"] .bg-gradient-accent {
+  background: linear-gradient(90deg, hsl(var(--accent)) 0%, hsl(var(--primary)) 100%);
+}
+
+/* Enhanced gradients - more vibrant with multiple color stops */
+[data-gradient="enhanced"] .bg-gradient-primary {
+  background: linear-gradient(135deg,
+    hsl(var(--primary)) 0%,
+    hsl(var(--accent)) 50%,
+    hsl(var(--secondary)) 100%
+  );
+}
+
+[data-gradient="enhanced"] .bg-gradient-brand {
+  background: linear-gradient(135deg,
+    hsl(var(--accent)) 0%,
+    hsl(var(--primary)) 40%,
+    hsl(var(--secondary)) 100%
+  );
+}
+
+[data-gradient="enhanced"] .bg-gradient-accent {
+  background: linear-gradient(90deg,
+    hsl(var(--accent)) 0%,
+    hsl(var(--primary)) 50%,
+    hsl(var(--accent)) 100%
+  );
+}
+
+/* Hover glow effects - disabled when data-hover-glow="false" */
+.hover-glow,
+.hover-glow-primary {
+  transition: box-shadow 0.3s ease;
+}
+
+.hover-glow:hover {
+  box-shadow: 0 0 20px hsla(var(--accent), 0.4);
+}
+
+.hover-glow-primary:hover {
+  box-shadow: 0 0 20px hsla(var(--primary), 0.4);
+}
+
+[data-hover-glow="false"] .hover-glow:hover,
+[data-hover-glow="false"] .hover-glow-primary:hover {
+  box-shadow: none;
+}
+
+/* Background animation keyframes */
+@keyframes slow-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+/* Animated background gradient class */
+.animate-slow-gradient {
+  background-size: 200% 200%;
+  animation: slow-gradient 15s ease infinite;
+}
+
+/* Disable background animation when data-bg-animation="false" */
+[data-bg-animation="false"] .animate-slow-gradient {
+  animation: none;
+  background-size: 100% 100%;
+}

ccw/frontend/src/locales/en/theme.json

@@ -26,5 +26,13 @@
   "preview.surface": "Card",
   "preview.accent": "Accent",
   "save": "Save Custom Theme",
-  "reset": "Reset to Preset"
+  "reset": "Reset to Preset",
+  "gradient": {
+    "title": "Gradient Effects",
+    "off": "Off",
+    "standard": "Standard",
+    "enhanced": "Enhanced",
+    "hoverGlow": "Enable hover glow effects",
+    "bgAnimation": "Enable background gradient animation"
+  }
 }

ccw/frontend/src/locales/zh/theme.json

@@ -26,5 +26,13 @@
   "preview.surface": "卡片",
   "preview.accent": "强调色",
   "save": "保存自定义主题",
-  "reset": "重置为预设"
+  "reset": "重置为预设",
+  "gradient": {
+    "title": "渐变效果",
+    "off": "关闭",
+    "standard": "标准",
+    "enhanced": "增强",
+    "hoverGlow": "启用悬停光晕效果",
+    "bgAnimation": "启用背景渐变动画"
+  }
 }