diff --git a/README.md b/README.md
index cc5cf53..80d2a64 100644
--- a/README.md
+++ b/README.md
@@ -161,6 +161,29 @@ sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file libssl-dev
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
 ```
 
+**Linux** (Fedora/RPM):
+```bash
+sudo dnf install -y \
+  webkit2gtk4.1-devel \
+  openssl-devel \
+  gtk3-devel \
+  libayatana-appindicator-gtk3-devel \
+  librsvg2-devel \
+  curl wget file gcc make
+
+# Install Rust
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+source ~/.cargo/env
+
+# Enable cron scheduling support
+sudo dnf install -y cronie
+sudo systemctl enable --now crond
+```
+
+> **Fedora note:** If `libayatana-appindicator-gtk3-devel` is not found, try `libappindicator-gtk3-devel`. If `webkit2gtk4.1-devel` is missing, also install `libsoup3-devel`.
+
+> **Wayland:** ATM supports Wayland natively via gnome-terminal or konsole. If you are running a pure Wayland session (no XWayland), ensure one of these is installed.
+
 </details>
 
 **Build for production**:
@@ -221,7 +244,8 @@ pnpm tauri build
 |----------|--------|---------|
 | Windows | Full support | PowerShell |
 | macOS | Full support | bash (Terminal.app) |
-| Linux | Supported | bash |
+| Linux (Debian/Ubuntu) | Supported | gnome-terminal, xterm, or any installed emulator |
+| Linux (Fedora/RPM) | Supported | konsole, gnome-terminal, alacritty, kitty, xterm |
 
 ---
 
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 3ca68de..0232168 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -254,6 +254,42 @@ fn delete_scheduled_task(task_name: String) -> Result<String, String> {
     }
 }
 
+/// Finds an available terminal emulator, preferring Wayland-native ones when running
+/// under a pure Wayland session (WAYLAND_DISPLAY set, DISPLAY unset).
+#[cfg(target_os = "linux")]
+fn find_terminal_emulator() -> Option<&'static str> {
+    let wayland = std::env::var("WAYLAND_DISPLAY").is_ok();
+    let x11 = std::env::var("DISPLAY").is_ok();
+    let pure_wayland = wayland && !x11;
+
+    // X11-only terminals that won't work without XWayland
+    const X11_ONLY: &[&str] = &["xterm", "urxvt"];
+
+    // Ordered by preference: Debian compat first, then common DEs, then fallbacks
+    const CANDIDATES: &[&str] = &[
+        "x-terminal-emulator", // Debian/Ubuntu alternatives system
+        "gnome-terminal",      // GNOME (native Wayland)
+        "konsole",             // KDE (native Wayland, default on Fedora KDE)
+        "xfce4-terminal",      // XFCE
+        "alacritty",           // Modern, widespread
+        "kitty",               // Modern, widespread
+        "tilix",               // GNOME alternative
+        "xterm",               // X11 fallback
+        "urxvt",               // X11 fallback
+    ];
+
+    CANDIDATES.iter().find(|&&term| {
+        if pure_wayland && X11_ONLY.contains(&term) {
+            return false;
+        }
+        StdCommand::new("which")
+            .arg(term)
+            .output()
+            .map(|o| o.status.success())
+            .unwrap_or(false)
+    }).copied()
+}
+
 /// Opens a visible terminal window running the given script.
 #[tauri::command]
 fn open_terminal(script_path: String) -> Result<(), String> {
@@ -287,21 +323,22 @@ fn open_terminal(script_path: String) -> Result<(), String> {
 
     #[cfg(target_os = "linux")]
     {
-        let terminals = [
-            ("x-terminal-emulator", vec!["-e", &script_path]),
-            ("gnome-terminal", vec!["--", &script_path]),
-            ("xterm", vec!["-e", &script_path]),
-        ];
-        let mut launched = false;
-        for (term, args) in &terminals {
-            if StdCommand::new(term).args(args).spawn().is_ok() {
-                launched = true;
-                break;
-            }
-        }
-        if !launched {
-            return Err("No terminal emulator found".into());
-        }
+        let term = find_terminal_emulator().ok_or_else(|| {
+            "No terminal emulator found. Install gnome-terminal, konsole, xterm, or another terminal emulator.".to_string()
+        })?;
+
+        // Terminals that use "--" as argument separator instead of "-e"
+        const DASH_DASH_TERMS: &[&str] = &["gnome-terminal", "konsole", "kitty"];
+        let args: Vec<&str> = if DASH_DASH_TERMS.contains(&term) {
+            vec!["--", &script_path]
+        } else {
+            vec!["-e", &script_path]
+        };
+
+        StdCommand::new(term)
+            .args(&args)
+            .spawn()
+            .map_err(|e| format!("Failed to open terminal '{}': {}", term, e))?;
     }
 
     Ok(())
diff --git a/src/App.css b/src/App.css
index b156c0d..a9dbe45 100644
--- a/src/App.css
+++ b/src/App.css
@@ -29,12 +29,84 @@
   --radius-xl: 12px;
 }
 
+/* Tinted background tokens — used for node cards and inline panels */
+:root {
+  --tint-blue:       rgba(74, 158, 255, 0.06);
+  --tint-blue-hover: rgba(74, 158, 255, 0.14);
+  --tint-green:      rgba(63, 185, 80, 0.06);
+  --tint-orange:     rgba(240, 136, 62, 0.07);
+  --tint-purple:     rgba(217, 70, 239, 0.06);
+  --tint-gold:       rgba(210, 153, 34, 0.08);
+  --tint-subagent:   rgba(165, 214, 255, 0.07);
+  --bg-toast:        #1e1e3a;
+  --shadow-panel:    rgba(0, 0, 0, 0.4);
+  --shadow-dropdown: rgba(0, 0, 0, 0.35);
+  /* White-alpha tokens used in inputs, pills, subtle dividers */
+  --bg-input:          rgba(255, 255, 255, 0.05);
+  --border-input:      rgba(255, 255, 255, 0.10);
+  --border-input-hover:rgba(255, 255, 255, 0.25);
+  --border-subtle:     rgba(255, 255, 255, 0.06);
+  --bg-hover-subtle:   rgba(255, 255, 255, 0.06);
+}
+
+/* Light theme overrides — applied when <html data-theme="light"> */
+[data-theme="light"] {
+  --bg-primary: #ffffff;
+  --bg-secondary: #f6f8fa;
+  --bg-surface: #ffffff;
+  --bg-elevated: #eaeef2;
+  --text-primary: #1f2328;
+  --text-secondary: #636c76;
+  --text-tertiary: #9198a1;
+  --border-color: #d1d9e0;
+  --border-hover: #8c959f;
+  /* Tint tokens need more opacity on light backgrounds to remain visible */
+  --tint-blue:       rgba(74, 158, 255, 0.13);
+  --tint-blue-hover: rgba(74, 158, 255, 0.24);
+  --tint-green:      rgba(63, 185, 80, 0.13);
+  --tint-orange:     rgba(240, 136, 62, 0.13);
+  --tint-purple:     rgba(217, 70, 239, 0.11);
+  --tint-gold:       rgba(210, 153, 34, 0.13);
+  --tint-subagent:   rgba(74, 140, 210, 0.13);
+  --bg-toast:        #eaeef2;
+  --shadow-panel:    rgba(0, 0, 0, 0.12);
+  --shadow-dropdown: rgba(0, 0, 0, 0.10);
+  /* White-alpha tokens → solid equivalents on light background */
+  --bg-input:          var(--bg-primary);
+  --border-input:      var(--border-color);
+  --border-input-hover:var(--border-hover);
+  --border-subtle:     var(--border-color);
+  --bg-hover-subtle:   var(--bg-elevated);
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+/* Native form elements — override OS/browser defaults so they follow the active theme */
+select,
+input[type="text"],
+input[type="password"],
+input[type="number"],
+input[type="email"],
+textarea {
+  background-color: var(--bg-input);
+  color: var(--text-primary);
+  border-color: var(--border-input);
+  color-scheme: dark;
+}
+
+[data-theme="light"] select,
+[data-theme="light"] input[type="text"],
+[data-theme="light"] input[type="password"],
+[data-theme="light"] input[type="number"],
+[data-theme="light"] input[type="email"],
+[data-theme="light"] textarea {
+  color-scheme: light;
+}
+
 html, body, #root {
   height: 100%;
   width: 100%;
diff --git a/src/App.tsx b/src/App.tsx
index c9ff147..a87d253 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import { useUiStore } from "./store/ui-store";
 import { startWatching } from "./services/file-watcher";
 
 function App() {
+  const theme = useUiStore((s) => s.theme);
   const inspectorOpen = useUiStore((s) => s.inspectorOpen);
   const createDialogOpen = useUiStore((s) => s.createDialogOpen);
   const closeCreateDialog = useUiStore((s) => s.closeCreateDialog);
@@ -132,7 +133,13 @@ function App() {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  // Apply theme to DOM whenever it changes
+  useEffect(() => {
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+
   // Load project on mount — use saved projectPath if available, else home directory
+  // Also restore saved theme preference.
   useEffect(() => {
     (async () => {
       const home = await homeDir();
@@ -148,6 +155,9 @@ function App() {
               targetPath = parsed.projectPath;
             }
           }
+          if (parsed.theme === "light" || parsed.theme === "dark") {
+            useUiStore.getState().setTheme(parsed.theme);
+          }
         }
       } catch {
         // Fall back to home directory
diff --git a/src/components/common/Toast.tsx b/src/components/common/Toast.tsx
index c865f48..ef0f5a2 100644
--- a/src/components/common/Toast.tsx
+++ b/src/components/common/Toast.tsx
@@ -59,13 +59,15 @@ function ToastItem({ entry }: { entry: ToastEntry }) {
   return (
     <div
       style={{
-        background: "#1e1e3a",
+        background: "var(--bg-toast)",
         borderLeft: `4px solid ${borderColors[entry.type]}`,
+        border: `1px solid var(--border-color)`,
+        borderLeftWidth: 4,
         borderRadius: 6,
         padding: "10px 16px",
         color: "var(--text-primary)",
         fontSize: 13,
-        boxShadow: "0 2px 12px rgba(0,0,0,0.35)",
+        boxShadow: "0 2px 12px var(--shadow-dropdown)",
         animation: entry.leaving
           ? "aui-toast-out 0.3s forwards"
           : "aui-toast-in 0.25s ease-out",
diff --git a/src/components/context-hub/ContextHub.tsx b/src/components/context-hub/ContextHub.tsx
index 98d44b6..54cd318 100644
--- a/src/components/context-hub/ContextHub.tsx
+++ b/src/components/context-hub/ContextHub.tsx
@@ -321,7 +321,7 @@ function SectionHeader({ label, count }: { label: string; count: number }) {
         letterSpacing: "0.06em",
         color: "var(--text-secondary)",
         padding: "12px 0 6px",
-        borderBottom: "1px solid rgba(255,255,255,0.06)",
+        borderBottom: "1px solid var(--bg-hover-subtle)",
         marginBottom: 8,
       }}
     >
@@ -502,7 +502,7 @@ function ImportDropdown({
         background: "var(--bg-surface, #1c2333)",
         border: "1px solid var(--border-color)",
         borderRadius: 8,
-        boxShadow: "0 8px 24px rgba(0,0,0,0.5)",
+        boxShadow: "0 8px 24px var(--shadow-panel)",
         zIndex: 200,
         padding: 6,
       }}
@@ -513,7 +513,7 @@ function ImportDropdown({
             style={menuItemStyle}
             onClick={handleFileImport}
             disabled={importing}
-            onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover-subtle)"; }}
             onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
           >
             From File...
@@ -522,7 +522,7 @@ function ImportDropdown({
             style={menuItemStyle}
             onClick={() => setMode("url")}
             disabled={importing}
-            onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(255,255,255,0.06)"; }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover-subtle)"; }}
             onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
           >
             From GitHub URL
@@ -545,8 +545,8 @@ function ImportDropdown({
               boxSizing: "border-box",
               padding: "7px 10px",
               fontSize: 12,
-              background: "rgba(255,255,255,0.05)",
-              border: "1px solid rgba(255,255,255,0.12)",
+              background: "var(--bg-input)",
+              border: "1px solid var(--border-subtle)",
               borderRadius: 6,
               color: "var(--text-primary)",
               outline: "none",
@@ -591,12 +591,12 @@ function UtilityButton({ label, onClick }: { label: string; onClick: () => void
       onClick={onClick}
       style={{
         padding: "4px 12px", fontSize: 11, fontWeight: 600,
-        background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.1)",
+        background: "var(--bg-input)", border: "1px solid var(--border-input)",
         color: "var(--text-secondary)", borderRadius: 6, cursor: "pointer",
         transition: "all 0.15s",
       }}
-      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)"; e.currentTarget.style.color = "var(--text-primary)"; }}
-      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; e.currentTarget.style.color = "var(--text-secondary)"; }}
+      onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--border-input-hover)"; e.currentTarget.style.color = "var(--text-primary)"; }}
+      onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-input)"; e.currentTarget.style.color = "var(--text-secondary)"; }}
     >
       {label}
     </button>
@@ -750,7 +750,7 @@ export function ContextHub() {
         position: "fixed", top: "var(--toolbar-height)", right: 0, bottom: 0,
         width: 480, background: "var(--bg-secondary)",
         borderLeft: "1px solid var(--border-color)",
-        boxShadow: "-4px 0 24px rgba(0,0,0,0.4)",
+        boxShadow: "-4px 0 24px var(--shadow-panel)",
         display: "flex", flexDirection: "column", zIndex: 100,
         animation: "slideInRight 0.2s ease",
       }}
@@ -759,10 +759,8 @@ export function ContextHub() {
       <div
         style={{
           flexShrink: 0,
-          background: "linear-gradient(180deg, rgba(21,27,35,0.95) 0%, rgba(21,27,35,0.85) 100%)",
-          backdropFilter: "blur(16px)",
-          WebkitBackdropFilter: "blur(16px)",
-          borderBottom: "1px solid rgba(255,255,255,0.06)",
+          background: "var(--bg-secondary)",
+          borderBottom: "1px solid var(--border-subtle)",
           padding: "14px 16px 12px",
         }}
       >
@@ -779,7 +777,7 @@ export function ContextHub() {
                   borderRadius: 8, cursor: "pointer",
                   transition: "border-color 0.15s",
                 }}
-                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)"; }}
+                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--border-input-hover)"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--border-color)"; }}
               >
                 Import
@@ -842,14 +840,14 @@ export function ContextHub() {
             style={{
               width: "100%", boxSizing: "border-box",
               padding: "8px 30px 8px 12px",
-              background: "rgba(255,255,255,0.05)",
-              border: "1px solid rgba(255,255,255,0.1)",
+              background: "var(--bg-input)",
+              border: "1px solid var(--border-input)",
               borderRadius: 8, color: "var(--text-primary)",
               fontSize: 13, outline: "none",
               transition: "border-color 0.2s",
             }}
             onFocus={(e) => { e.currentTarget.style.borderColor = "rgba(74,158,255,0.4)"; }}
-            onBlur={(e) => { e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)"; }}
+            onBlur={(e) => { e.currentTarget.style.borderColor = "var(--border-input)"; }}
           />
           {search && (
             <button
@@ -878,7 +876,7 @@ export function ContextHub() {
                   fontSize: 12,
                   fontWeight: 600,
                   borderRadius: 20,
-                  border: isActive ? "1px solid transparent" : "1px solid rgba(255,255,255,0.12)",
+                  border: isActive ? "1px solid transparent" : "1px solid var(--border-subtle)",
                   background: isActive ? "var(--accent-blue)" : "transparent",
                   color: isActive ? "#fff" : "var(--text-secondary)",
                   cursor: "pointer",
@@ -886,10 +884,10 @@ export function ContextHub() {
                   letterSpacing: "0.02em",
                 }}
                 onMouseEnter={(e) => {
-                  if (!isActive) e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
+                  if (!isActive) e.currentTarget.style.borderColor = "var(--border-input-hover)";
                 }}
                 onMouseLeave={(e) => {
-                  if (!isActive) e.currentTarget.style.borderColor = "rgba(255,255,255,0.12)";
+                  if (!isActive) e.currentTarget.style.borderColor = "var(--border-subtle)";
                 }}
               >
                 {chip}
diff --git a/src/components/context-hub/FileViewer.tsx b/src/components/context-hub/FileViewer.tsx
index e9046dc..4e0e480 100644
--- a/src/components/context-hub/FileViewer.tsx
+++ b/src/components/context-hub/FileViewer.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import Editor from "@monaco-editor/react";
 import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";
+import { useUiStore } from "@/store/ui-store";
 
 function detectLanguage(filePath: string): string {
   if (filePath.endsWith(".md")) return "markdown";
@@ -18,6 +19,7 @@ interface FileViewerProps {
 }
 
 export function FileViewer({ filePath, language }: FileViewerProps) {
+  const theme = useUiStore((s) => s.theme);
   const [content, setContent] = useState<string | null>(null);
   const [editedContent, setEditedContent] = useState("");
   const [editing, setEditing] = useState(false);
@@ -138,7 +140,7 @@ export function FileViewer({ filePath, language }: FileViewerProps) {
       <Editor
         height={300}
         language={lang}
-        theme="vs-dark"
+        theme={theme === "light" ? "vs" : "vs-dark"}
         value={editing ? editedContent : (content ?? "")}
         onChange={editing ? (v) => setEditedContent(v ?? "") : undefined}
         options={{
diff --git a/src/components/inspector/AgentEditor.tsx b/src/components/inspector/AgentEditor.tsx
index 7be46ed..4252d79 100644
--- a/src/components/inspector/AgentEditor.tsx
+++ b/src/components/inspector/AgentEditor.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, type CSSProperties, type KeyboardEven
 import Editor from "@monaco-editor/react";
 import { MarkdownEditor } from "./MarkdownEditor";
 import { useTreeStore } from "@/store/tree-store";
+import { useUiStore } from "@/store/ui-store";
 import { useAutosave } from "@/hooks/useAutosave";
 import { getApiKey, generateText } from "@/services/claude-api";
 import { toast } from "@/components/common/Toast";
@@ -168,6 +169,7 @@ interface AgentEditorProps {
 export function AgentEditor({ node }: AgentEditorProps) {
   const updateNode = useTreeStore((s) => s.updateNode);
   const saveNode = useTreeStore((s) => s.saveNode);
+  const theme = useUiStore((s) => s.theme);
 
   const cfg = (node.config as AgentConfig | null) ?? { name: node.name };
 
@@ -482,7 +484,7 @@ export function AgentEditor({ node }: AgentEditorProps) {
           <Editor
             height={100}
             language="json"
-            theme="vs-dark"
+            theme={theme === "light" ? "vs" : "vs-dark"}
             value={hooksJson}
             options={{
               readOnly: true,
diff --git a/src/components/inspector/GroupEditor.tsx b/src/components/inspector/GroupEditor.tsx
index 785091e..9e05138 100644
--- a/src/components/inspector/GroupEditor.tsx
+++ b/src/components/inspector/GroupEditor.tsx
@@ -730,7 +730,7 @@ IMPORTANT: Each agent already has their full skill file content above. Pass it d
               alignItems: "flex-start",
               justifyContent: "space-between",
               padding: "6px 8px",
-              background: "rgba(63, 185, 80, 0.05)",
+              background: "var(--tint-green)",
               border: "1px solid var(--border-color)",
               borderRadius: 4,
               marginBottom: 4,
@@ -961,7 +961,7 @@ IMPORTANT: Each agent already has their full skill file content above. Pass it d
                 alignItems: "center",
                 gap: 8,
                 padding: "6px 8px",
-                background: "rgba(74, 158, 255, 0.05)",
+                background: "var(--tint-blue)",
                 border: "1px solid var(--border-color)",
                 borderRadius: 4,
                 marginBottom: 4,
@@ -970,11 +970,11 @@ IMPORTANT: Each agent already has their full skill file content above. Pass it d
               }}
               onMouseEnter={(e) => {
                 (e.currentTarget as HTMLDivElement).style.background =
-                  "rgba(74, 158, 255, 0.12)";
+                  "var(--tint-blue-hover)";
               }}
               onMouseLeave={(e) => {
                 (e.currentTarget as HTMLDivElement).style.background =
-                  "rgba(74, 158, 255, 0.05)";
+                  "var(--tint-blue)";
               }}
             >
               <span
diff --git a/src/components/inspector/InspectorPanel.tsx b/src/components/inspector/InspectorPanel.tsx
index 24587c2..703f80b 100644
--- a/src/components/inspector/InspectorPanel.tsx
+++ b/src/components/inspector/InspectorPanel.tsx
@@ -544,7 +544,7 @@ IMPORTANT: The JSON must contain exactly ${teamCount} objects in the "teams" arr
               alignItems: "center",
               justifyContent: "space-between",
               padding: "6px 8px",
-              background: "rgba(63, 185, 80, 0.05)",
+              background: "var(--tint-green)",
               border: "1px solid var(--border-color)",
               borderRadius: 4,
               marginBottom: 4,
@@ -676,15 +676,15 @@ IMPORTANT: The JSON must contain exactly ${teamCount} objects in the "teams" arr
                   alignItems: "center",
                   gap: 8,
                   padding: "6px 8px",
-                  background: "rgba(74, 158, 255, 0.05)",
+                  background: "var(--tint-blue)",
                   border: "1px solid var(--border-color)",
                   borderRadius: 4,
                   marginBottom: 4,
                   cursor: "pointer",
                   transition: "background 0.15s",
                 }}
-                onMouseEnter={(e) => { e.currentTarget.style.background = "rgba(74, 158, 255, 0.12)"; }}
-                onMouseLeave={(e) => { e.currentTarget.style.background = "rgba(74, 158, 255, 0.05)"; }}
+                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--tint-blue-hover)"; }}
+                onMouseLeave={(e) => { e.currentTarget.style.background = "var(--tint-blue)"; }}
               >
                 <span style={{
                   display: "inline-block",
diff --git a/src/components/inspector/MarkdownEditor.tsx b/src/components/inspector/MarkdownEditor.tsx
index 67f7f56..0cf4b37 100644
--- a/src/components/inspector/MarkdownEditor.tsx
+++ b/src/components/inspector/MarkdownEditor.tsx
@@ -1,4 +1,5 @@
 import Editor from "@monaco-editor/react";
+import { useUiStore } from "@/store/ui-store";
 
 interface MarkdownEditorProps {
   value: string;
@@ -13,11 +14,12 @@ export function MarkdownEditor({
   readOnly = false,
   height = "300px",
 }: MarkdownEditorProps) {
+  const theme = useUiStore((s) => s.theme);
   return (
     <Editor
       height={height}
       language="markdown"
-      theme="vs-dark"
+      theme={theme === "light" ? "vs" : "vs-dark"}
       value={value}
       onChange={(v) => onChange?.(v ?? "")}
       options={{
diff --git a/src/components/inspector/SettingsEditor.tsx b/src/components/inspector/SettingsEditor.tsx
index 4983423..f6cd954 100644
--- a/src/components/inspector/SettingsEditor.tsx
+++ b/src/components/inspector/SettingsEditor.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, type CSSProperties, type KeyboardEvent } from "react";
 import Editor from "@monaco-editor/react";
 import { useTreeStore } from "@/store/tree-store";
+import { useUiStore } from "@/store/ui-store";
 import type { AuiNode } from "@/types/aui-node";
 import type { SettingsConfig } from "@/types/settings";
 
@@ -213,6 +214,7 @@ interface SettingsEditorProps {
 export function SettingsEditor({ node }: SettingsEditorProps) {
   const updateNode = useTreeStore((s) => s.updateNode);
   const saveNode = useTreeStore((s) => s.saveNode);
+  const theme = useUiStore((s) => s.theme);
 
   const cfg = (node.config as SettingsConfig | null) ?? {};
 
@@ -328,7 +330,7 @@ export function SettingsEditor({ node }: SettingsEditorProps) {
         <Editor
           height={500}
           language="json"
-          theme="vs-dark"
+          theme={theme === "light" ? "vs" : "vs-dark"}
           value={rawJson}
           onChange={(v) => setRawJson(v ?? "")}
           options={{
diff --git a/src/components/schedule/SchedulePanel.tsx b/src/components/schedule/SchedulePanel.tsx
index 5fcaf1b..dc67cd8 100644
--- a/src/components/schedule/SchedulePanel.tsx
+++ b/src/components/schedule/SchedulePanel.tsx
@@ -31,9 +31,9 @@ const panelStyle: CSSProperties = {
 };
 
 const inputStyle: CSSProperties = {
-  background: "#1a1a2e",
-  border: "1px solid #2a2a4a",
-  color: "white",
+  background: "var(--bg-input)",
+  border: "1px solid var(--border-input)",
+  color: "var(--text-primary)",
   padding: 8,
   borderRadius: 4,
   width: "100%",
@@ -459,7 +459,7 @@ IMPORTANT: Each agent already has their full skill file content above. Pass it d
           <div
             style={{
               padding: 14,
-              background: "#1a1a2e",
+              background: "var(--bg-elevated)",
               border: "1px solid var(--accent-purple)",
               borderRadius: 8,
               marginBottom: 16,
diff --git a/src/components/settings/SettingsPanel.tsx b/src/components/settings/SettingsPanel.tsx
index e39d501..80a6dc4 100644
--- a/src/components/settings/SettingsPanel.tsx
+++ b/src/components/settings/SettingsPanel.tsx
@@ -15,6 +15,7 @@ interface AppSettings {
   agentColor: string;
   accentColor: string;
   autoSave: boolean;
+  theme: "dark" | "light";
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
@@ -23,6 +24,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   agentColor: "#f0883e",
   accentColor: "#4a9eff",
   autoSave: true,
+  theme: "dark",
 };
 
 const labelStyle: CSSProperties = {
@@ -60,10 +62,10 @@ const sectionStyle: CSSProperties = {
 };
 
 /**
- * Persist the chosen project path to ~/.aui/settings.json so it survives restarts.
- * Pass null to clear the saved path (reset to home).
+ * Persist the chosen project path (and optionally theme) to ~/.aui/settings.json
+ * so they survive restarts. Pass null for path to clear the saved path (reset to home).
  */
-async function saveProjectPath(path: string | null) {
+async function saveProjectPath(path: string | null, theme?: "dark" | "light") {
   const home = await homeDir();
   const auiDir = join(home, ".aui");
   if (!(await exists(auiDir))) {
@@ -83,12 +85,16 @@ async function saveProjectPath(path: string | null) {
   } else {
     delete current.projectPath;
   }
+  if (theme) {
+    current.theme = theme;
+  }
   await writeTextFile(settingsPath, JSON.stringify(current, null, 2));
 }
 
 export function SettingsPanel() {
   const settingsOpen = useUiStore((s) => s.settingsOpen);
   const toggleSettings = useUiStore((s) => s.toggleSettings);
+  const setTheme = useUiStore((s) => s.setTheme);
   const projectPath = useTreeStore((s) => s.projectPath);
 
   const [settings, setSettings] = useState<AppSettings>(DEFAULT_SETTINGS);
@@ -113,7 +119,11 @@ export function SettingsPanel() {
         if (await exists(settingsPath)) {
           const raw = await readTextFile(settingsPath);
           const parsed = JSON.parse(raw);
-          if (!cancelled) setSettings({ ...DEFAULT_SETTINGS, ...parsed });
+          if (!cancelled) {
+            const loaded = { ...DEFAULT_SETTINGS, ...parsed };
+            setSettings(loaded);
+            setTheme(loaded.theme);
+          }
         }
       } catch {
         // Use defaults
@@ -138,6 +148,10 @@ export function SettingsPanel() {
       const root = document.documentElement;
       if (settings.accentColor) root.style.setProperty("--accent-blue", settings.accentColor);
 
+      // Apply and persist theme
+      setTheme(settings.theme);
+      await saveProjectPath(null, settings.theme);
+
       toast("Settings saved", "success");
     } catch (err) {
       toast(err instanceof Error ? err.message : "Failed to save settings", "error");
@@ -156,7 +170,7 @@ export function SettingsPanel() {
         width: 400,
         background: "var(--bg-secondary)",
         borderLeft: "1px solid var(--border-color)",
-        boxShadow: "-4px 0 24px rgba(0,0,0,0.4)",
+        boxShadow: "-4px 0 24px var(--shadow-panel)",
         display: "flex",
         flexDirection: "column",
         zIndex: 150,
@@ -389,6 +403,33 @@ export function SettingsPanel() {
             {/* Preferences */}
             <div style={sectionStyle}>Preferences</div>
 
+            {/* Theme toggle */}
+            <div style={{ marginBottom: 16 }}>
+              <span style={labelStyle}>Theme</span>
+              <div style={{ display: "flex", gap: 8 }}>
+                {(["dark", "light"] as const).map((t) => (
+                  <button
+                    key={t}
+                    onClick={() => { setSettings({ ...settings, theme: t }); setTheme(t); }}
+                    style={{
+                      flex: 1,
+                      padding: "8px 0",
+                      background: settings.theme === t ? "var(--accent-blue)" : "var(--bg-elevated)",
+                      color: settings.theme === t ? "#fff" : "var(--text-secondary)",
+                      border: `1px solid ${settings.theme === t ? "var(--accent-blue)" : "var(--border-color)"}`,
+                      borderRadius: 6,
+                      cursor: "pointer",
+                      fontSize: 13,
+                      fontWeight: settings.theme === t ? 600 : 400,
+                      transition: "all 0.15s",
+                    }}
+                  >
+                    {t === "dark" ? "🌙 Dark" : "☀️ Light"}
+                  </button>
+                ))}
+              </div>
+            </div>
+
             <label
               style={{
                 display: "flex",
diff --git a/src/components/tree/OrgNode.tsx b/src/components/tree/OrgNode.tsx
index c89d8e6..afe0316 100644
--- a/src/components/tree/OrgNode.tsx
+++ b/src/components/tree/OrgNode.tsx
@@ -119,15 +119,15 @@ function OrgNodeInner({ data, selected }: NodeProps) {
   const currentHandleStyle = hovered ? handleHoverStyle : handleBaseStyle;
 
   const background = isPipeline
-    ? "rgba(217, 70, 239, 0.06)"
+    ? "var(--tint-purple)"
     : isGroup
       ? isSubAgent
-        ? "rgba(165, 214, 255, 0.06)"
+        ? "var(--tint-subagent)"
         : isMember
-          ? "rgba(240, 136, 62, 0.06)"
-          : "rgba(74, 158, 255, 0.06)"
+          ? "var(--tint-orange)"
+          : "var(--tint-blue)"
       : isRoot
-        ? "rgba(210, 153, 34, 0.08)"
+        ? "var(--tint-gold)"
         : "var(--bg-surface, #1c2333)";
 
   const borderLeftStyle = isGroup || isPipeline
@@ -194,7 +194,7 @@ function OrgNodeInner({ data, selected }: NodeProps) {
         style={{
           fontWeight: 700,
           fontSize: 14,
-          color: "#fff",
+          color: "var(--text-primary)",
           marginTop: 4,
           marginBottom: 4,
           overflow: "hidden",
@@ -210,7 +210,7 @@ function OrgNodeInner({ data, selected }: NodeProps) {
       <div
         style={{
           fontSize: 12,
-          color: "#a0a0a0",
+          color: "var(--text-secondary)",
           lineHeight: "1.3",
           overflow: "hidden",
           display: "-webkit-box",
@@ -291,7 +291,7 @@ function OrgNodeInner({ data, selected }: NodeProps) {
           <span
             style={{
               fontSize: 10,
-              color: "#a0a0a0",
+              color: "var(--text-tertiary)",
               overflow: "hidden",
               textOverflow: "ellipsis",
               whiteSpace: "nowrap",
@@ -319,7 +319,7 @@ function OrgNodeInner({ data, selected }: NodeProps) {
                 fontSize: 9,
                 fontWeight: 600,
                 color: "#3fb950",
-                background: "rgba(63, 185, 80, 0.12)",
+                background: "var(--tint-green)",
                 padding: "1px 5px",
                 borderRadius: 8,
                 whiteSpace: "nowrap",
diff --git a/src/store/ui-store.ts b/src/store/ui-store.ts
index 65ce61f..ceadb37 100644
--- a/src/store/ui-store.ts
+++ b/src/store/ui-store.ts
@@ -37,6 +37,7 @@ interface UiState {
   toasts: Array<{ id: string; message: string; type: 'success' | 'error' | 'info' }>;
   collapsedGroups: Set<string>;
   multiSelectedNodeIds: Set<string>;
+  theme: "dark" | "light";
 }
 
 interface RemoteActions {
@@ -87,6 +88,7 @@ interface UiActions {
   clearMultiSelect(): void;
   collapseAllGroups(groupIds: Set<string>): void;
   expandAllGroups(): void;
+  setTheme(theme: "dark" | "light"): void;
 }
 
 type UiStore = UiState & RemoteState & UiActions & RemoteActions;
@@ -113,6 +115,7 @@ export const useUiStore = create<UiStore>()((set, get) => ({
   toasts: [],
   collapsedGroups: new Set<string>(),
   multiSelectedNodeIds: new Set<string>(),
+  theme: "dark",
 
   // ── Remote state ──────────────────────────────────
   remoteConfig: { ...DEFAULT_REMOTE_CONFIG },
@@ -270,6 +273,10 @@ export const useUiStore = create<UiStore>()((set, get) => ({
     set({ collapsedGroups: new Set<string>() });
   },
 
+  setTheme(theme: "dark" | "light") {
+    set({ theme });
+  },
+
   // ── Remote actions ──────────────────────────────────
 
   setRemoteConfig(updates: Partial<RemoteConfig>) {