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}