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

@@ -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}

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)',

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>