From 06a88a877f021abcf116b3caffaa3fa61362aeca Mon Sep 17 00:00:00 2001
From: DrSmoothl <1787882683@qq.com>
Date: Thu, 19 Feb 2026 18:01:14 +0800
Subject: [PATCH] refactor(theme): migrate all CSS variable references and
 adapt third-party components

- Task 10: Bulk migrate CSS variable references from --primary/--secondary/etc to --color-primary/--color-secondary/etc across all components
- Task 11: Adapt CodeEditor to auto-detect theme from ThemeProvider context, remove hardcoded theme='dark' from plugin-config and bot config pages
---
 dashboard/src/components/CodeEditor.tsx       | 10 +++-
 .../src/components/tour/tour-renderer.tsx     | 18 +++----
 dashboard/src/components/waves-background.tsx |  4 +-
 dashboard/src/routes/annual-report.tsx        |  2 +-
 dashboard/src/routes/config/bot.tsx           |  1 -
 dashboard/src/routes/index.tsx                | 46 ++++++++---------
 dashboard/src/routes/plugin-config.tsx        | 27 +++++-----
 dashboard/src/routes/settings.tsx             | 10 ++--
 dashboard/src/styles/uppy-custom.css          | 50 +++++++++----------
 9 files changed, 86 insertions(+), 82 deletions(-)

diff --git a/dashboard/src/components/CodeEditor.tsx b/dashboard/src/components/CodeEditor.tsx
index 52b22d53..224046ec 100644
--- a/dashboard/src/components/CodeEditor.tsx
+++ b/dashboard/src/components/CodeEditor.tsx
@@ -7,6 +7,8 @@ import { EditorView } from '@codemirror/view'
 import { StreamLanguage } from '@codemirror/language'
 import { toml as tomlMode } from '@codemirror/legacy-modes/mode/toml'
 
+import { useTheme } from '@/components/use-theme'
+
 export type Language = 'python' | 'json' | 'toml' | 'text'
 
 interface CodeEditorProps {
@@ -39,10 +41,11 @@ export function CodeEditor({
   minHeight,
   maxHeight,
   placeholder,
-  theme = 'dark',
+  theme,
   className = '',
 }: CodeEditorProps) {
   const [mounted, setMounted] = useState(false)
+  const { resolvedTheme } = useTheme()
 
   useEffect(() => {
     setMounted(true)
@@ -81,6 +84,9 @@ export function CodeEditor({
     extensions.push(EditorView.editable.of(false))
   }
 
+  // 如果外部传了 theme prop 则使用，否则从 context 自动获取
+  const effectiveTheme = theme ?? resolvedTheme
+
   return (
     <div className={`rounded-md overflow-hidden border custom-scrollbar ${className}`}>
       <CodeMirror
@@ -88,7 +94,7 @@ export function CodeEditor({
         height={height}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        theme={theme === 'dark' ? oneDark : undefined}
+        theme={effectiveTheme === 'dark' ? oneDark : undefined}
         extensions={extensions}
         onChange={onChange}
         placeholder={placeholder}
diff --git a/dashboard/src/components/tour/tour-renderer.tsx b/dashboard/src/components/tour/tour-renderer.tsx
index b2fecbed..c015e6c6 100644
--- a/dashboard/src/components/tour/tour-renderer.tsx
+++ b/dashboard/src/components/tour/tour-renderer.tsx
@@ -7,10 +7,10 @@ import { useTour } from './use-tour'
 const joyrideStyles = {
   options: {
     zIndex: 10000,
-    primaryColor: 'hsl(var(--primary))',
-    textColor: 'hsl(var(--foreground))',
-    backgroundColor: 'hsl(var(--background))',
-    arrowColor: 'hsl(var(--background))',
+    primaryColor: 'hsl(var(--color-primary))',
+    textColor: 'hsl(var(--color-foreground))',
+    backgroundColor: 'hsl(var(--color-background))',
+    arrowColor: 'hsl(var(--color-background))',
     overlayColor: 'rgba(0, 0, 0, 0.5)',
   },
   tooltip: {
@@ -30,23 +30,23 @@ const joyrideStyles = {
     padding: '0.5rem 0',
   },
   buttonNext: {
-    backgroundColor: 'hsl(var(--primary))',
-    color: 'hsl(var(--primary-foreground))',
+    backgroundColor: 'hsl(var(--color-primary))',
+    color: 'hsl(var(--color-primary-foreground))',
     borderRadius: 'calc(var(--radius) - 2px)',
     fontSize: '0.875rem',
     padding: '0.5rem 1rem',
   },
   buttonBack: {
-    color: 'hsl(var(--muted-foreground))',
+    color: 'hsl(var(--color-muted-foreground))',
     fontSize: '0.875rem',
     marginRight: '0.5rem',
   },
   buttonSkip: {
-    color: 'hsl(var(--muted-foreground))',
+    color: 'hsl(var(--color-muted-foreground))',
     fontSize: '0.875rem',
   },
   buttonClose: {
-    color: 'hsl(var(--muted-foreground))',
+    color: 'hsl(var(--color-muted-foreground))',
   },
   spotlight: {
     borderRadius: 'var(--radius)',
diff --git a/dashboard/src/components/waves-background.tsx b/dashboard/src/components/waves-background.tsx
index 93a373a1..3564d08e 100644
--- a/dashboard/src/components/waves-background.tsx
+++ b/dashboard/src/components/waves-background.tsx
@@ -354,7 +354,7 @@ export function WavesBackground() {
           left: 0,
           width: '0.5rem',
           height: '0.5rem',
-          background: 'hsl(var(--primary) / 0.3)',
+          background: 'hsl(var(--color-primary) / 0.3)',
           borderRadius: '50%',
           transform: 'translate3d(calc(var(--x, -0.5rem) - 50%), calc(var(--y, 50%) - 50%), 0)',
           willChange: 'transform',
@@ -372,7 +372,7 @@ export function WavesBackground() {
         <style>{`
           path {
             fill: none;
-            stroke: hsl(var(--primary) / 0.20);
+            stroke: hsl(var(--color-primary) / 0.20);
             stroke-width: 1px;
           }
         `}</style>
diff --git a/dashboard/src/routes/annual-report.tsx b/dashboard/src/routes/annual-report.tsx
index a0c77eb4..528e9496 100644
--- a/dashboard/src/routes/annual-report.tsx
+++ b/dashboard/src/routes/annual-report.tsx
@@ -341,7 +341,7 @@ export function AnnualReportPage() {
                     contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 12px rgba(0,0,0,0.1)' }}
                     cursor={{ fill: 'transparent' }}
                   />
-                  <Bar dataKey="count" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+                  <Bar dataKey="count" fill="hsl(var(--color-primary))" radius={[4, 4, 0, 0]} />
                 </BarChart>
               </ResponsiveContainer>
             </CardContent>
diff --git a/dashboard/src/routes/config/bot.tsx b/dashboard/src/routes/config/bot.tsx
index 0deac66a..bb493150 100644
--- a/dashboard/src/routes/config/bot.tsx
+++ b/dashboard/src/routes/config/bot.tsx
@@ -625,7 +625,6 @@ function BotConfigPageContent() {
                 }
               }}
               language="toml"
-              theme="dark"
               height="calc(100vh - 280px)"
               minHeight="500px"
               placeholder="TOML 配置内容"
diff --git a/dashboard/src/routes/index.tsx b/dashboard/src/routes/index.tsx
index df1a18c7..39eaa27b 100644
--- a/dashboard/src/routes/index.tsx
+++ b/dashboard/src/routes/index.tsx
@@ -403,15 +403,15 @@ function IndexPageContent() {
   const chartConfig = {
     requests: {
       label: '请求数',
-      color: 'hsl(var(--chart-1))',
+      color: 'hsl(var(--color-chart-1))',
     },
     cost: {
       label: '花费(¥)',
-      color: 'hsl(var(--chart-2))',
+      color: 'hsl(var(--color-chart-2))',
     },
     tokens: {
       label: 'Tokens',
-      color: 'hsl(var(--chart-3))',
+      color: 'hsl(var(--color-chart-3))',
     },
   } satisfies ChartConfig
 
@@ -738,17 +738,17 @@ function IndexPageContent() {
             <CardContent>
               <ChartContainer config={chartConfig} className="h-[300px] sm:h-[400px] w-full aspect-auto">
                 <LineChart data={hourly_data}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
+                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
                   <XAxis
                     dataKey="timestamp"
                     tickFormatter={(value) => formatDateTime(value)}
                     angle={-45}
                     textAnchor="end"
                     height={60}
-                    stroke="hsl(var(--muted-foreground))"
-                    tick={{ fill: 'hsl(var(--muted-foreground))' }}
+                    stroke="hsl(var(--color-muted-foreground))"
+                    tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
                   />
-                  <YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
+                  <YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
                   <ChartTooltip
                     content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
                   />
@@ -772,17 +772,17 @@ function IndexPageContent() {
               <CardContent>
                 <ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
                   <BarChart data={hourly_data}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
+                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
                     <XAxis
                       dataKey="timestamp"
                       tickFormatter={(value) => formatDateTime(value)}
                       angle={-45}
                       textAnchor="end"
                       height={60}
-                      stroke="hsl(var(--muted-foreground))"
-                      tick={{ fill: 'hsl(var(--muted-foreground))' }}
+                      stroke="hsl(var(--color-muted-foreground))"
+                      tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
                     />
-                    <YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
+                    <YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
                     <ChartTooltip
                       content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
                     />
@@ -800,17 +800,17 @@ function IndexPageContent() {
               <CardContent>
                 <ChartContainer config={chartConfig} className="h-[250px] sm:h-[300px] w-full aspect-auto">
                   <BarChart data={hourly_data}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
+                    <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
                     <XAxis
                       dataKey="timestamp"
                       tickFormatter={(value) => formatDateTime(value)}
                       angle={-45}
                       textAnchor="end"
                       height={60}
-                      stroke="hsl(var(--muted-foreground))"
-                      tick={{ fill: 'hsl(var(--muted-foreground))' }}
+                      stroke="hsl(var(--color-muted-foreground))"
+                      tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
                     />
-                    <YAxis stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
+                    <YAxis stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
                     <ChartTooltip
                       content={<ChartTooltipContent labelFormatter={(value) => formatDateTime(value as string)} />}
                     />
@@ -889,7 +889,7 @@ function IndexPageContent() {
                           <div
                             className="w-3 h-3 rounded-full ml-2 flex-shrink-0"
                             style={{
-                              backgroundColor: `hsl(var(--chart-${(index % 5) + 1}))`,
+                              backgroundColor: `hsl(var(--color-chart-${(index % 5) + 1}))`,
                             }}
                           />
                         </div>
@@ -992,28 +992,28 @@ function IndexPageContent() {
                 config={{
                   requests: {
                     label: '请求数',
-                    color: 'hsl(var(--chart-1))',
+                    color: 'hsl(var(--color-chart-1))',
                   },
                   cost: {
                     label: '花费(¥)',
-                    color: 'hsl(var(--chart-2))',
+                    color: 'hsl(var(--color-chart-2))',
                   },
                 }}
                 className="h-[400px] sm:h-[500px] w-full aspect-auto"
               >
                 <BarChart data={daily_data}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--muted-foreground) / 0.2)" />
+                  <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--color-muted-foreground) / 0.2)" />
                   <XAxis
                     dataKey="timestamp"
                     tickFormatter={(value) => {
                       const date = new Date(value)
                       return `${date.getMonth() + 1}/${date.getDate()}`
                     }}
-                    stroke="hsl(var(--muted-foreground))"
-                    tick={{ fill: 'hsl(var(--muted-foreground))' }}
+                    stroke="hsl(var(--color-muted-foreground))"
+                    tick={{ fill: 'hsl(var(--color-muted-foreground))' }}
                   />
-                  <YAxis yAxisId="left" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
-                  <YAxis yAxisId="right" orientation="right" stroke="hsl(var(--muted-foreground))" tick={{ fill: 'hsl(var(--muted-foreground))' }} />
+                  <YAxis yAxisId="left" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
+                  <YAxis yAxisId="right" orientation="right" stroke="hsl(var(--color-muted-foreground))" tick={{ fill: 'hsl(var(--color-muted-foreground))' }} />
                   <ChartTooltip
                     content={
                       <ChartTooltipContent
diff --git a/dashboard/src/routes/plugin-config.tsx b/dashboard/src/routes/plugin-config.tsx
index f1b86808..c6cd4ce8 100644
--- a/dashboard/src/routes/plugin-config.tsx
+++ b/dashboard/src/routes/plugin-config.tsx
@@ -602,20 +602,19 @@ function PluginConfigEditor({ plugin, onBack }: PluginConfigEditorProps) {
             </AlertDescription>
           </Alert>
           
-          <CodeEditor
-            value={sourceCode}
-            onChange={(value) => {
-              setSourceCode(value)
-              if (hasTomlError) {
-                setHasTomlError(false)
-              }
-            }}
-            language="toml"
-            theme="dark"
-            height="calc(100vh - 350px)"
-            minHeight="500px"
-            placeholder="TOML 配置内容"
-          />
+            <CodeEditor
+              value={sourceCode}
+              onChange={(value) => {
+                setSourceCode(value)
+                if (hasTomlError) {
+                  setHasTomlError(false)
+                }
+              }}
+              language="toml"
+              height="calc(100vh - 350px)"
+              minHeight="500px"
+              placeholder="TOML 配置内容"
+            />
         </div>
       )}
 
diff --git a/dashboard/src/routes/settings.tsx b/dashboard/src/routes/settings.tsx
index 3e02e467..b9feb805 100644
--- a/dashboard/src/routes/settings.tsx
+++ b/dashboard/src/routes/settings.tsx
@@ -178,14 +178,14 @@ function applyAccentColor(color: string) {
   const selectedColor = colors[color as keyof typeof colors]
   if (selectedColor) {
     // 设置主色
-    root.style.setProperty('--primary', selectedColor.hsl)
+    root.style.setProperty('--color-primary', selectedColor.hsl)
     
     // 设置渐变（如果有）
     if (selectedColor.gradient) {
-      root.style.setProperty('--primary-gradient', selectedColor.gradient)
+      root.style.setProperty('--color-primary-gradient', selectedColor.gradient)
       root.classList.add('has-gradient')
     } else {
-      root.style.removeProperty('--primary-gradient')
+      root.style.removeProperty('--color-primary-gradient')
       root.classList.remove('has-gradient')
     }
   } else if (color.startsWith('#')) {
@@ -219,8 +219,8 @@ function applyAccentColor(color: string) {
       return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
     }
     
-    root.style.setProperty('--primary', hexToHsl(color))
-    root.style.removeProperty('--primary-gradient')
+    root.style.setProperty('--color-primary', hexToHsl(color))
+    root.style.removeProperty('--color-primary-gradient')
     root.classList.remove('has-gradient')
   }
 }
diff --git a/dashboard/src/styles/uppy-custom.css b/dashboard/src/styles/uppy-custom.css
index 7084f7d6..db8b0467 100644
--- a/dashboard/src/styles/uppy-custom.css
+++ b/dashboard/src/styles/uppy-custom.css
@@ -16,29 +16,29 @@
 
 /* 拖放区域样式 */
 .uppy-Dashboard-AddFiles {
-  border: 2px dashed hsl(var(--border)) !important;
+  border: 2px dashed hsl(var(--color-border)) !important;
   border-radius: 0.5rem !important;
-  background: hsl(var(--muted) / 0.3) !important;
+  background: hsl(var(--color-muted) / 0.3) !important;
   transition: all 0.2s ease;
 }
 
 .uppy-Dashboard-AddFiles:hover {
-  border-color: hsl(var(--primary)) !important;
-  background: hsl(var(--muted) / 0.5) !important;
+  border-color: hsl(var(--color-primary)) !important;
+  background: hsl(var(--color-muted) / 0.5) !important;
 }
 
 .uppy-Dashboard-AddFiles-title {
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--color-foreground)) !important;
   font-weight: 500 !important;
 }
 
 .uppy-Dashboard-AddFiles-info {
-  color: hsl(var(--muted-foreground)) !important;
+  color: hsl(var(--color-muted-foreground)) !important;
 }
 
 /* 按钮样式 */
 .uppy-Dashboard-browse {
-  color: hsl(var(--primary)) !important;
+  color: hsl(var(--color-primary)) !important;
   font-weight: 500 !important;
 }
 
@@ -52,63 +52,63 @@
 }
 
 .uppy-Dashboard-Item {
-  border-bottom-color: hsl(var(--border)) !important;
+  border-bottom-color: hsl(var(--color-border)) !important;
 }
 
 .uppy-Dashboard-Item-name {
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--color-foreground)) !important;
 }
 
 .uppy-Dashboard-Item-status {
-  color: hsl(var(--muted-foreground)) !important;
+  color: hsl(var(--color-muted-foreground)) !important;
 }
 
 /* 进度条样式 */
 .uppy-StatusBar {
-  background: hsl(var(--muted)) !important;
-  border-top: 1px solid hsl(var(--border)) !important;
+  background: hsl(var(--color-muted)) !important;
+  border-top: 1px solid hsl(var(--color-border)) !important;
 }
 
 .uppy-StatusBar-progress {
-  background: hsl(var(--primary)) !important;
+  background: hsl(var(--color-primary)) !important;
 }
 
 .uppy-StatusBar-content {
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--color-foreground)) !important;
 }
 
 .uppy-StatusBar-actionBtn--upload {
-  background: hsl(var(--primary)) !important;
-  color: hsl(var(--primary-foreground)) !important;
+  background: hsl(var(--color-primary)) !important;
+  color: hsl(var(--color-primary-foreground)) !important;
   border-radius: 0.375rem !important;
   font-weight: 500 !important;
   padding: 0.5rem 1rem !important;
 }
 
 .uppy-StatusBar-actionBtn--upload:hover {
-  background: hsl(var(--primary) / 0.9) !important;
+  background: hsl(var(--color-primary) / 0.9) !important;
 }
 
 /* Note 提示文字样式 */
 .uppy-Dashboard-note {
-  color: hsl(var(--muted-foreground)) !important;
+  color: hsl(var(--color-muted-foreground)) !important;
   font-size: 0.75rem !important;
 }
 
 /* 暗色主题适配 */
 [data-uppy-theme="dark"] .uppy-Dashboard-AddFiles,
 .dark .uppy-Dashboard-AddFiles {
-  background: hsl(var(--muted) / 0.2) !important;
+  background: hsl(var(--color-muted) / 0.2) !important;
 }
 
 [data-uppy-theme="dark"] .uppy-Dashboard-AddFiles-title,
 .dark .uppy-Dashboard-AddFiles-title {
-  color: hsl(var(--foreground)) !important;
+  color: hsl(var(--color-foreground)) !important;
 }
 
 [data-uppy-theme="dark"] .uppy-StatusBar,
 .dark .uppy-StatusBar {
-  background: hsl(var(--muted) / 0.5) !important;
+  background: hsl(var(--color-muted) / 0.5) !important;
 }
 
 /* 移除 Uppy 自带的边框和阴影 */
@@ -124,7 +124,7 @@
 
 /* 删除按钮样式 */
 .uppy-Dashboard-Item-action--remove {
-  color: hsl(var(--destructive)) !important;
+  color: hsl(var(--color-destructive)) !important;
 }
 
 .uppy-Dashboard-Item-action--remove:hover {
@@ -137,7 +137,7 @@
 }
 
 .uppy-Dashboard-Item.is-error .uppy-Dashboard-Item-progress {
-  color: hsl(var(--destructive)) !important;
+  color: hsl(var(--color-destructive)) !important;
 }
 
 /* 滚动条样式 */
@@ -150,10 +150,10 @@
 }
 
 .uppy-Dashboard-files::-webkit-scrollbar-thumb {
-  background: hsl(var(--muted-foreground) / 0.3);
+  background: hsl(var(--color-muted-foreground) / 0.3);
   border-radius: 3px;
 }
 
 .uppy-Dashboard-files::-webkit-scrollbar-thumb:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
+  background: hsl(var(--color-muted-foreground) / 0.5);
 }