v1.3.0: 主题系统+代码分割+设置重构+命令片段库+命令面板+连接面板 | 19 files +2141/-257 | tsc零错误 构建成功

src/index.css

@@ -2,6 +2,64 @@
 @tailwind components;
 @tailwind utilities;
 
+/* ===================================================================
+ * OpsXShell v1.3.0 — Theme CSS Variables
+ *
+ * The default (no data-theme attribute) keeps dark mode as before so
+ * that the very first paint looks correct even before React hydrates.
+ * useTheme.ts will immediately set data-theme + override vars on mount.
+ * =================================================================== */
+
+:root {
+  /* ---- Dark (default, matches original hard-coded values) ---- */
+  --color-dark-900: #0f172a;
+  --color-dark-800: #1e293b;
+  --color-dark-700: #334155;
+  --color-dark-600: #475569;
+
+  --color-text-primary:   #e2e8f0;
+  --color-text-secondary: #cbd5e1;
+  --color-text-muted:     #94a3b8;
+  --color-text-faint:     #64748b;
+  --color-text-dim:       #475569;
+
+  --color-accent-blue:   #3b82f6;
+  --color-accent-green:  #10b981;
+  --color-accent-purple: #8b5cf6;
+  --color-accent-orange: #f97316;
+
+  --color-scrollbar-track:   #1e293b;
+  --color-scrollbar-thumb:   #475569;
+  --color-scrollbar-thumb-h: #64748b;
+
+  --color-terminal-bg: #0f172a;
+}
+
+/* ---- Light theme ---- */
+:root[data-theme='light'] {
+  --color-dark-900: #ffffff;
+  --color-dark-800: #f3f4f6;
+  --color-dark-700: #e5e7eb;
+  --color-dark-600: #d1d5db;
+
+  --color-text-primary:   #1f2937;
+  --color-text-secondary: #374151;
+  --color-text-muted:     #6b7280;
+  --color-text-faint:     #9ca3af;
+  --color-text-dim:       #d1d5db;
+
+  --color-accent-blue:   #2563eb;
+  --color-accent-green:  #059669;
+  --color-accent-purple: #7c3aed;
+  --color-accent-orange: #ea580c;
+
+  --color-scrollbar-track:   #f3f4f6;
+  --color-scrollbar-thumb:   #d1d5db;
+  --color-scrollbar-thumb-h: #9ca3af;
+
+  --color-terminal-bg: #ffffff;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -14,8 +72,8 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #0f172a;
-  color: #e2e8f0;
+  background-color: var(--color-dark-900);
+  color: var(--color-text-primary);
   overflow: hidden;
 }
 
@@ -31,21 +89,21 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background: #1e293b;
+  background: var(--color-scrollbar-track);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #475569;
+  background: var(--color-scrollbar-thumb);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #64748b;
+  background: var(--color-scrollbar-thumb-h);
 }
 
 /* Terminal styles */
 .terminal-container {
-  background-color: #0f172a;
+  background-color: var(--color-terminal-bg);
   padding: 8px;
   border-radius: 4px;
   height: 100%;