feat(ui): add system/light/dark theme toggle

Add a 3-state theme toggle in folder selection and instance tabs, and update tokens/styles so light mode has readable contrast. Sync MUI surfaces and Shiki highlighting to CSS variables to prevent stale colors when switching themes.

packages/ui/src/styles/components/permission-notification.css

@@ -35,7 +35,7 @@
 .permission-center-modal-backdrop {
   position: fixed;
   inset: 0;
-  background: color-mix(in srgb, var(--text-inverted) 55%, transparent);
+  background: var(--overlay-scrim);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -52,7 +52,7 @@
   border-radius: var(--radius-xl);
   border: 1px solid var(--border-base);
   background: var(--surface-base);
-  box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25));
+  box-shadow: var(--panel-shadow-strong);
   overflow: hidden;
 }
 
@@ -234,4 +234,4 @@
     max-height: none;
     border-radius: 0;
   }
-}
+}

packages/ui/src/styles/messaging/message-section.css

@@ -244,7 +244,7 @@
   border-radius: 9999px;
   border: 1px solid var(--list-item-highlight-border);
   background-color: var(--list-item-highlight-bg-solid);
-  box-shadow: var(--panel-shadow, 0 4px 16px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--panel-shadow);
   overflow: hidden;
 }
 

packages/ui/src/styles/messaging/message-timeline.css

@@ -69,7 +69,7 @@
   overflow-y: auto;
   border-radius: 8px;
   background-color: var(--surface-base);
-  box-shadow: var(--panel-shadow, 0 6px 24px rgba(0, 0, 0, 0.2));
+  box-shadow: var(--panel-shadow);
 }
 
 .message-timeline::-webkit-scrollbar {
@@ -104,10 +104,10 @@
 
 .message-timeline-segment-active {
   border-color: transparent;
-  background-color: #0f5b44;
-  color: #fff;
+  background-color: var(--timeline-segment-active-bg);
+  color: var(--timeline-segment-active-text);
   font-weight: 700;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--timeline-segment-active-ring);
 }
 
 .message-timeline-segment:hover,
@@ -121,10 +121,10 @@
 .message-timeline-segment-active,
 .message-timeline-segment-active:hover,
 .message-timeline-segment-active:focus-visible {
-  background-color: #0f5b44;
-  color: #fff;
+  background-color: var(--timeline-segment-active-bg);
+  color: var(--timeline-segment-active-text);
   transform: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--timeline-segment-active-ring);
 }
 
 .message-timeline-segment:focus-visible {
@@ -167,7 +167,7 @@
   border-color: var(--session-status-permission-fg) !important;
   color: var(--session-status-permission-fg) !important;
   transform: none;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--timeline-segment-active-ring);
 }
 
 .message-timeline-compaction-auto {
@@ -181,11 +181,11 @@
 }
 
 .message-timeline-segment-active {
-  background-color: #0f5b44 !important;
+  background-color: var(--timeline-segment-active-bg) !important;
   border-color: transparent !important;
-  color: #fff !important;
+  color: var(--timeline-segment-active-text) !important;
   font-weight: 700;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  box-shadow: var(--timeline-segment-active-ring);
 }
 
 .message-timeline-label {
@@ -221,7 +221,7 @@
   border-radius: 8px;
   border: 1px solid var(--border-base);
   background-color: var(--surface-base);
-  box-shadow: var(--panel-shadow, 0 12px 32px rgba(0, 0, 0, 0.25));
+  box-shadow: var(--panel-shadow-strong);
   padding: 0.75rem;
 }
 

packages/ui/src/styles/messaging/prompt-input.css

@@ -97,7 +97,7 @@
 .prompt-history-button {
   @apply w-7 h-7 flex items-center justify-center rounded-md;
   color: var(--text-muted);
-  background-color: rgba(15, 23, 42, 0.04);
+  background-color: var(--control-ghost-bg);
   transition: background-color 0.15s ease, color 0.15s ease;
   padding: 0;
   flex-shrink: 0;
@@ -143,7 +143,7 @@
 
 .prompt-input.shell-mode {
   border-color: var(--status-success);
-  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
+  box-shadow: inset 0 0 0 1px var(--status-success-ring);
 }
 
 .prompt-input:focus {
@@ -152,7 +152,7 @@
 
 .prompt-input.shell-mode:focus {
   border-color: var(--status-success);
-  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
+  box-shadow: inset 0 0 0 1px var(--status-success-ring);
 }
 
 .prompt-input:disabled {
@@ -165,17 +165,17 @@
 
 .stop-button {
   @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
-  background-color: rgba(239, 68, 68, 0.85);
-  color: var(--text-inverted);
+  background-color: var(--button-danger-bg);
+  color: var(--button-danger-text);
 }
 
 .stop-button:hover:not(:disabled) {
-  background-color: rgba(239, 68, 68, 0.9);
+  background-color: var(--button-danger-hover-bg);
   @apply opacity-95 scale-105;
 }
 
 .stop-button:active:not(:disabled) {
-  background-color: rgba(239, 68, 68, 1);
+  background-color: var(--button-danger-active-bg);
   @apply scale-95;
 }
 
@@ -260,7 +260,7 @@
   background-color: var(--surface-base);
   border: 1px solid var(--border-base);
   border-radius: 10px;
-  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.25);
+  box-shadow: var(--popover-shadow);
   z-index: 20;
 }
 

packages/ui/src/styles/messaging/tool-call.css

@@ -11,7 +11,7 @@
 
 .tool-call-header-label {
   @apply flex items-center justify-between gap-2 font-semibold text-sm;
-  color: var(--message-tool-border);
+  color: var(--text-primary);
   margin-bottom: 1px;
 }
 
@@ -22,7 +22,7 @@
 .tool-call-header-button {
   background-color: transparent;
   border: 1px solid var(--border-base);
-  color: var(--message-tool-border);
+  color: var(--text-secondary);
   padding: 0.15rem 0.75rem;
   border-radius: 0.375rem;
   font-size: 0.75rem;
@@ -162,7 +162,7 @@
 
 .tool-call-preview-label {
   @apply text-xs font-semibold uppercase tracking-wide;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   letter-spacing: 0.5px;
 }
 
@@ -170,7 +170,7 @@
   font-family: var(--font-family-mono);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-tight);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-wrap: break-word;
@@ -231,7 +231,7 @@
 
 .tool-call-diff-toolbar-label {
   font-size: 11px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   text-transform: uppercase;
   letter-spacing: 0.08em;
 }
@@ -244,7 +244,7 @@
   @apply border text-xs font-semibold px-3 py-1 rounded transition-all duration-150;
   border-color: var(--border-base);
   background-color: transparent;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 
 .tool-call-diff-mode-button:hover {
@@ -388,7 +388,7 @@
 .tool-call-diff-viewer .diff-line-old-num,
 .tool-call-diff-viewer .diff-line-new-num,
 .tool-call-diff-viewer .diff-line-num {
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-size: var(--font-size-xs);
 }
 
@@ -450,7 +450,7 @@
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   margin-bottom: 4px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 
 .tool-call-diagnostics {
@@ -472,7 +472,7 @@
   @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
   font-family: var(--font-family-mono);
   font-size: 13px;
-  color: var(--message-tool-border);
+  color: var(--text-primary);
   background-color: var(--surface-code);
 }
 
@@ -496,7 +496,7 @@
   @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
   font-family: var(--font-family-mono);
   font-size: 13px;
-  color: var(--message-tool-border);
+  color: var(--text-primary);
   background-color: var(--surface-code);
 }
 
@@ -535,7 +535,7 @@
 
 .tool-call-diagnostics-caret {
   font-size: 12px;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 
 .tool-call-diagnostics {
@@ -615,7 +615,8 @@
 .tool-call-section pre {
   margin: 0;
   padding: 8px;
-  background-color: var(--surface-base);
+  background-color: var(--surface-code);
+  border: 1px solid var(--border-base);
   border-radius: 0px;
   overflow-x: auto;
   max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
@@ -649,7 +650,7 @@
 
 .tool-call-pending-message {
   @apply flex items-center gap-2 p-3 text-xs italic;
-  color: var(--text-muted);
+  color: var(--text-secondary);
 }
 
 .tool-call-emoji {
@@ -659,7 +660,7 @@
 .tool-call-action-button {
   @apply border text-xs font-semibold px-3 py-1 rounded transition-colors h-8 flex items-center;
   border-color: var(--border-base);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   background-color: transparent;
 }
 
@@ -679,7 +680,7 @@
 }
 
 .tool-call-content {
-  background-color: var(--surface-secondary);
+  background-color: var(--surface-code);
   border: 1px solid var(--border-base);
   border-radius: 0;
   padding: 8px 12px;
@@ -688,6 +689,7 @@
   line-height: var(--line-height-tight);
   overflow-x: auto;
   margin: 0;
+  color: var(--text-primary);
 }
 
 .tool-call-content code {

packages/ui/src/styles/tokens.css

@@ -1,9 +1,10 @@
 :root {
+  color-scheme: light;
   /* Surface tokens */
   --surface-base: #ffffff;
   --surface-secondary: #f5f5f5;
-  --surface-muted: #f8f9fa;
-  --surface-code: #f8f8f8;
+  --surface-muted: #f8fafc;
+  --surface-code: #f1f5f9;
   --surface-hover: #e0e0e0;
   
   /* Border tokens */
@@ -12,9 +13,9 @@
   --border-muted: #e0e0e0;
   
   /* Text tokens */
-  --text-primary: #1a1a1a;
-  --text-secondary: #666666;
-  --text-muted: #666666;
+  --text-primary: #111827;
+  --text-secondary: #334155;
+  --text-muted: #475569;
   --text-inverted: #ffffff;
   
   /* Accent tokens */
@@ -27,13 +28,13 @@
   --status-warning: #ff9800;
   
   /* Message-specific tokens */
-  --message-user-bg: var(--surface-secondary);
+  --message-user-bg: color-mix(in oklab, var(--surface-secondary) 88%, var(--message-user-border));
   --message-user-border: #2196f3;
   --message-assistant-bg: var(--message-tool-bg);
   --message-assistant-border: #f59e0b;
 
-  --message-tool-bg: #f8f9fa;
-  --message-tool-border: #6c757d;
+  --message-tool-bg: #eef2f7;
+  --message-tool-border: #64748b;
 
   /* Session list selection tints */
   --session-user-active-bg: color-mix(in oklab, var(--surface-secondary) 85%, var(--message-user-border));
@@ -71,11 +72,14 @@
   --folder-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
   --folder-card-radius: 16px;
   --dropdown-highlight-bg: rgba(0, 102, 255, 0.1);
-  --dropdown-highlight-text: var(--text-inverted);
+  --dropdown-highlight-text: var(--text-primary);
   --selection-highlight-bg: rgba(0, 102, 255, 0.12);
   --selection-highlight-strong-bg: rgba(0, 102, 255, 0.18);
   --overlay-scrim: rgba(0, 0, 0, 0.5);
   --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
+  --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
+  --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.18);
+  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
   --message-error-bg: rgba(244, 67, 54, 0.1);
   --message-error-bg-strong: rgba(244, 67, 54, 0.15);
   --danger-soft-bg: rgba(239, 68, 68, 0.1);
@@ -86,6 +90,18 @@
   --log-level-default: var(--text-primary);
   --focus-ring-color: var(--accent-primary);
   --focus-ring-offset: var(--surface-base);
+  --control-ghost-bg: color-mix(in oklab, var(--text-primary) 6%, transparent);
+  --status-success-ring: color-mix(in oklab, var(--status-success) 45%, transparent);
+  --border-critical: var(--status-error);
+
+  --timeline-segment-active-bg: #0f5b44;
+  --timeline-segment-active-text: #ffffff;
+  --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
+
+  --button-danger-bg: color-mix(in oklab, var(--status-error) 85%, var(--surface-base));
+  --button-danger-hover-bg: color-mix(in oklab, var(--status-error) 90%, var(--surface-base));
+  --button-danger-active-bg: color-mix(in oklab, var(--status-error) 95%, var(--surface-base));
+  --button-danger-text: #ffffff;
   --kbd-bg: var(--surface-secondary);
   --kbd-border: var(--border-base);
   --kbd-text: var(--text-primary);
@@ -151,7 +167,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme]) {
+    color-scheme: dark;
     /* Surface tokens */
     --surface-base: #1a1a1a;
     --surface-secondary: #2a2a2a;
@@ -225,6 +242,14 @@
   --kbd-bg: var(--surface-secondary);
   --kbd-border: var(--border-base);
   --kbd-text: var(--text-primary);
+  --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+  --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.45);
+  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
+  --border-critical: var(--status-error);
+  --timeline-segment-active-bg: #0f5b44;
+  --timeline-segment-active-text: #ffffff;
+  --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  --button-danger-text: #ffffff;
   --button-primary-bg: #3f3f46;
   --button-primary-hover-bg: #52525b;
   --button-primary-text: #f5f6f8;
@@ -306,6 +331,7 @@
 }
 
 [data-theme="dark"] {
+  color-scheme: dark;
   /* Surface tokens */
   --surface-base: #1a1a1a;
   --surface-secondary: #2a2a2a;
@@ -379,6 +405,14 @@
   --selection-highlight-strong-bg: rgba(0, 128, 255, 0.28);
   --overlay-scrim: rgba(0, 0, 0, 0.6);
   --scroll-elevation-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
+  --panel-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+  --panel-shadow-strong: 0 12px 32px rgba(0, 0, 0, 0.45);
+  --popover-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
+  --border-critical: var(--status-error);
+  --timeline-segment-active-bg: #0f5b44;
+  --timeline-segment-active-text: #ffffff;
+  --timeline-segment-active-ring: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  --button-danger-text: #ffffff;
   --message-error-bg: rgba(244, 67, 54, 0.12);
   --message-error-bg-strong: rgba(244, 67, 54, 0.2);
   --danger-soft-bg: rgba(244, 67, 54, 0.16);