feat: implement theme toggle functionality with light, dark, and system preferences

- Added theme variables for light and dark modes in viewer-template.html.
- Created a custom hook `useTheme` to manage theme preferences and resolve the current theme based on user selection or system settings.
- Introduced `ThemeToggle` component to allow users to switch between themes.
- Updated `Header` component to include the `ThemeToggle` and pass theme preference and change handler.
- Modified `App` component to integrate theme management and pass relevant props to child components.

plugin/ui/viewer.html

@@ -15,6 +15,246 @@
       font-display: swap;
     }
 
+    /* Theme Variables - Light Mode */
+    :root,
+    [data-theme="light"] {
+      --color-bg-primary: #ffffff;
+      --color-bg-secondary: #f6f8fa;
+      --color-bg-tertiary: #f0f0f0;
+      --color-bg-header: #f6f8fa;
+      --color-bg-card: #ffffff;
+      --color-bg-card-hover: #f6f8fa;
+      --color-bg-input: #ffffff;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #fffbf0;
+      --color-bg-prompt: #f6f3fb;
+      --color-bg-stat: #f6f8fa;
+      --color-bg-scrollbar-track: #ffffff;
+      --color-bg-scrollbar-thumb: #d1d5da;
+      --color-bg-scrollbar-thumb-hover: #b1b5ba;
+
+      --color-border-primary: #d0d7de;
+      --color-border-secondary: #d8dee4;
+      --color-border-hover: #0969da;
+      --color-border-focus: #0969da;
+      --color-border-summary: #d4a72c;
+      --color-border-summary-hover: #c29d29;
+      --color-border-prompt: #8250df;
+      --color-border-prompt-hover: #6e40c9;
+
+      --color-text-primary: #24292f;
+      --color-text-secondary: #57606a;
+      --color-text-tertiary: #6e7781;
+      --color-text-muted: #8b949e;
+      --color-text-header: #24292f;
+      --color-text-title: #24292f;
+      --color-text-subtitle: #57606a;
+      --color-text-button: #ffffff;
+      --color-text-summary: #8a6116;
+      --color-text-logo: #24292f;
+
+      --color-accent-primary: #0969da;
+      --color-accent-focus: #0969da;
+      --color-accent-success: #1a7f37;
+      --color-accent-error: #d1242f;
+      --color-accent-summary: #9a6700;
+      --color-accent-prompt: #8250df;
+
+      --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+      --color-type-badge-text: #0969da;
+      --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+      --color-summary-badge-text: #9a6700;
+      --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+      --color-prompt-badge-text: #8250df;
+
+      --color-skeleton-base: #d0d7de;
+      --color-skeleton-highlight: #e8ecef;
+
+      --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+    }
+
+    /* Theme Variables - Dark Mode */
+    [data-theme="dark"] {
+      --color-bg-primary: #1e1e1e;
+      --color-bg-secondary: #2d2d2d;
+      --color-bg-tertiary: #252526;
+      --color-bg-header: #252526;
+      --color-bg-card: #2d2d2d;
+      --color-bg-card-hover: #333333;
+      --color-bg-input: #2d2d2d;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #3d2f00;
+      --color-bg-prompt: #2d1b4e;
+      --color-bg-stat: #2d2d2d;
+      --color-bg-scrollbar-track: #1e1e1e;
+      --color-bg-scrollbar-thumb: #424242;
+      --color-bg-scrollbar-thumb-hover: #4e4e4e;
+
+      --color-border-primary: #404040;
+      --color-border-secondary: #404040;
+      --color-border-hover: #505050;
+      --color-border-focus: #58a6ff;
+      --color-border-summary: #9e6a03;
+      --color-border-summary-hover: #ae7a13;
+      --color-border-prompt: #6e40c9;
+      --color-border-prompt-hover: #8e6cdb;
+
+      --color-text-primary: #cccccc;
+      --color-text-secondary: #a0a0a0;
+      --color-text-tertiary: #6e7681;
+      --color-text-muted: #8b949e;
+      --color-text-header: #e0e0e0;
+      --color-text-title: #e0e0e0;
+      --color-text-subtitle: #a0a0a0;
+      --color-text-button: #ffffff;
+      --color-text-summary: #f2cc60;
+      --color-text-logo: #dadada;
+
+      --color-accent-primary: #58a6ff;
+      --color-accent-focus: #58a6ff;
+      --color-accent-success: #16c60c;
+      --color-accent-error: #e74856;
+      --color-accent-summary: #f2cc60;
+      --color-accent-prompt: #8e6cdb;
+
+      --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+      --color-type-badge-text: #58a6ff;
+      --color-summary-badge-bg: rgba(242, 204, 96, 0.125);
+      --color-summary-badge-text: #f2cc60;
+      --color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
+      --color-prompt-badge-text: #8e6cdb;
+
+      --color-skeleton-base: #404040;
+      --color-skeleton-highlight: #505050;
+
+      --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+    }
+
+    /* System preference default */
+    @media (prefers-color-scheme: light) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #ffffff;
+        --color-bg-secondary: #f6f8fa;
+        --color-bg-tertiary: #f0f0f0;
+        --color-bg-header: #f6f8fa;
+        --color-bg-card: #ffffff;
+        --color-bg-card-hover: #f6f8fa;
+        --color-bg-input: #ffffff;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #fffbf0;
+        --color-bg-prompt: #f6f3fb;
+        --color-bg-stat: #f6f8fa;
+        --color-bg-scrollbar-track: #ffffff;
+        --color-bg-scrollbar-thumb: #d1d5da;
+        --color-bg-scrollbar-thumb-hover: #b1b5ba;
+
+        --color-border-primary: #d0d7de;
+        --color-border-secondary: #d8dee4;
+        --color-border-hover: #0969da;
+        --color-border-focus: #0969da;
+        --color-border-summary: #d4a72c;
+        --color-border-summary-hover: #c29d29;
+        --color-border-prompt: #8250df;
+        --color-border-prompt-hover: #6e40c9;
+
+        --color-text-primary: #24292f;
+        --color-text-secondary: #57606a;
+        --color-text-tertiary: #6e7781;
+        --color-text-muted: #8b949e;
+        --color-text-header: #24292f;
+        --color-text-title: #24292f;
+        --color-text-subtitle: #57606a;
+        --color-text-button: #ffffff;
+        --color-text-summary: #8a6116;
+        --color-text-logo: #24292f;
+
+        --color-accent-primary: #0969da;
+        --color-accent-focus: #0969da;
+        --color-accent-success: #1a7f37;
+        --color-accent-error: #d1242f;
+        --color-accent-summary: #9a6700;
+        --color-accent-prompt: #8250df;
+
+        --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+        --color-type-badge-text: #0969da;
+        --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+        --color-summary-badge-text: #9a6700;
+        --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+        --color-prompt-badge-text: #8250df;
+
+        --color-skeleton-base: #d0d7de;
+        --color-skeleton-highlight: #e8ecef;
+
+        --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #1e1e1e;
+        --color-bg-secondary: #2d2d2d;
+        --color-bg-tertiary: #252526;
+        --color-bg-header: #252526;
+        --color-bg-card: #2d2d2d;
+        --color-bg-card-hover: #333333;
+        --color-bg-input: #2d2d2d;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #3d2f00;
+        --color-bg-prompt: #2d1b4e;
+        --color-bg-stat: #2d2d2d;
+        --color-bg-scrollbar-track: #1e1e1e;
+        --color-bg-scrollbar-thumb: #424242;
+        --color-bg-scrollbar-thumb-hover: #4e4e4e;
+
+        --color-border-primary: #404040;
+        --color-border-secondary: #404040;
+        --color-border-hover: #505050;
+        --color-border-focus: #58a6ff;
+        --color-border-summary: #9e6a03;
+        --color-border-summary-hover: #ae7a13;
+        --color-border-prompt: #6e40c9;
+        --color-border-prompt-hover: #8e6cdb;
+
+        --color-text-primary: #cccccc;
+        --color-text-secondary: #a0a0a0;
+        --color-text-tertiary: #6e7681;
+        --color-text-muted: #8b949e;
+        --color-text-header: #e0e0e0;
+        --color-text-title: #e0e0e0;
+        --color-text-subtitle: #a0a0a0;
+        --color-text-button: #ffffff;
+        --color-text-summary: #f2cc60;
+        --color-text-logo: #dadada;
+
+        --color-accent-primary: #58a6ff;
+        --color-accent-focus: #58a6ff;
+        --color-accent-success: #16c60c;
+        --color-accent-error: #e74856;
+        --color-accent-summary: #f2cc60;
+        --color-accent-prompt: #8e6cdb;
+
+        --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+        --color-type-badge-text: #58a6ff;
+        --color-summary-badge-bg: rgba(242, 204, 96, 0.125);
+        --color-summary-badge-text: #f2cc60;
+        --color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
+        --color-prompt-badge-text: #8e6cdb;
+
+        --color-skeleton-base: #404040;
+        --color-skeleton-highlight: #505050;
+
+        --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+      }
+    }
+
     * {
       margin: 0;
       padding: 0;
@@ -23,8 +263,8 @@
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-      background: #1e1e1e;
+      background: var(--color-bg-primary);
-      color: #cccccc;
+      color: var(--color-text-primary);
       font-size: 14px;
       overflow: hidden;
     }
@@ -48,8 +288,8 @@
       top: 0;
       width: 400px;
       height: 100vh;
-      background: #1e1e1e;
+      background: var(--color-bg-primary);
-      border-left: 1px solid #404040;
+      border-left: 1px solid var(--color-border-primary);
       display: flex;
       flex-direction: column;
       transform: translate3d(100%, 0, 0);
@@ -64,32 +304,32 @@
 
     .header {
       padding: 14px 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #252526;
+      background: var(--color-bg-header);
     }
 
     .sidebar-header {
       padding: 14px 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #252526;
+      background: var(--color-bg-header);
     }
 
     .sidebar-header h1 {
       font-size: 16px;
       font-weight: 500;
-      color: #e0e0e0;
+      color: var(--color-text-header);
     }
 
     .header h1 {
       font-size: 16px;
       font-weight: 500;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       display: flex;
       align-items: center;
       gap: 10px;
@@ -113,7 +353,7 @@
       font-weight: 100;
       font-size: 20px;
       letter-spacing: -0.03em;
-      color: #dadada;
+      color: var(--color-text-logo);
     }
 
     .status {
@@ -123,9 +363,10 @@
       font-size: 13px;
     }
 
-    .settings-btn {
+    .settings-btn,
+    .theme-toggle-btn {
       background: transparent;
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       padding: 8px;
       width: 36px;
       height: 36px;
@@ -133,22 +374,24 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #cccccc;
+      color: var(--color-text-primary);
       transition: all 0.15s ease;
     }
 
-    .settings-btn:hover {
+    .settings-btn:hover,
-      background: #2d2d2d;
+    .theme-toggle-btn:hover {
-      border-color: #58a6ff;
+      background: var(--color-bg-secondary);
+      border-color: var(--color-border-focus);
     }
 
     .settings-btn.active {
-      background: #0969da;
+      background: var(--color-bg-button);
-      border-color: #0969da;
+      border-color: var(--color-bg-button);
-      color: white;
+      color: var(--color-text-button);
     }
 
-    .settings-icon {
+    .settings-icon,
+    .theme-toggle-btn svg {
       width: 18px;
       height: 18px;
     }
@@ -157,12 +400,12 @@
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: #e74856;
+      background: var(--color-accent-error);
       animation: pulse 2s ease-in-out infinite;
     }
 
     .status-dot.connected {
-      background: #16c60c;
+      background: var(--color-accent-success);
       animation: none;
     }
 
@@ -181,9 +424,9 @@
     select,
     input,
     button {
-      background: #2d2d2d;
+      background: var(--color-bg-input);
-      color: #cccccc;
+      color: var(--color-text-primary);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       padding: 6px 12px;
       font-family: inherit;
       font-size: 13px;
@@ -193,30 +436,30 @@
 
     select:hover,
     input:hover {
-      border-color: #58a6ff;
+      border-color: var(--color-border-focus);
     }
 
     select:focus,
     input:focus {
       outline: none;
-      border-color: #58a6ff;
+      border-color: var(--color-border-focus);
-      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
+      box-shadow: var(--shadow-focus);
     }
 
     button {
-      background: #0969da;
+      background: var(--color-bg-button);
-      color: #ffffff;
+      color: var(--color-text-button);
       border: none;
       font-weight: 500;
       cursor: pointer;
     }
 
     button:hover:not(:disabled) {
-      background: #1177e6;
+      background: var(--color-bg-button-hover);
     }
 
     button:active:not(:disabled) {
-      background: #0860ca;
+      background: var(--color-bg-button-active);
     }
 
     button:disabled {
@@ -240,8 +483,8 @@
     .card {
       margin-bottom: 24px;
       padding: 20px 24px;
-      background: #2d2d2d;
+      background: var(--color-bg-card);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       border-radius: 8px;
       transition: all 0.15s ease;
       animation: slideIn 0.3s ease-out;
@@ -261,7 +504,7 @@
     }
 
     .card:hover {
-      border-color: #505050;
+      border-color: var(--color-border-hover);
     }
 
     .card-header {
@@ -270,14 +513,14 @@
       gap: 10px;
       margin-bottom: 8px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .card-type {
       padding: 2px 8px;
-      background: #58a6ff20;
+      background: var(--color-type-badge-bg);
-      color: #58a6ff;
+      color: var(--color-type-badge-text);
       border-radius: 3px;
       font-weight: 500;
       text-transform: uppercase;
@@ -288,7 +531,7 @@
     .card-title {
       font-size: 17px;
       margin-bottom: 8px;
-      color: #e0e0e0;
+      color: var(--color-text-title);
       font-weight: 600;
       line-height: 1.4;
       letter-spacing: -0.01em;
@@ -296,46 +539,46 @@
 
     .card-subtitle {
       font-size: 14px;
-      color: #a0a0a0;
+      color: var(--color-text-subtitle);
       margin-bottom: 8px;
       line-height: 1.6;
     }
 
     .card-meta {
       font-size: 12px;
-      color: #6e7681;
+      color: var(--color-text-tertiary);
       margin-top: 8px;
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .summary-card {
-      border-color: #9e6a03;
+      border-color: var(--color-border-summary);
-      background: #3d2f00;
+      background: var(--color-bg-summary);
     }
 
     .summary-card:hover {
-      border-color: #ae7a13;
+      border-color: var(--color-border-summary-hover);
     }
 
     .summary-card .card-type {
-      background: #f2cc6020;
+      background: var(--color-summary-badge-bg);
-      color: #f2cc60;
+      color: var(--color-summary-badge-text);
     }
 
     .summary-card .card-title {
-      color: #f2cc60;
+      color: var(--color-text-summary);
     }
 
     .settings-section {
       padding: 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .settings-section h3 {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 14px;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       letter-spacing: 0.3px;
     }
 
@@ -347,13 +590,13 @@
       display: block;
       margin-bottom: 6px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .setting-description {
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       margin-bottom: 8px;
       line-height: 1.5;
     }
@@ -366,13 +609,13 @@
 
     .stat {
       padding: 10px 12px;
-      background: #2d2d2d;
+      background: var(--color-bg-stat);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       border-radius: 4px;
     }
 
     .stat-label {
-      color: #8b949e;
+      color: var(--color-text-muted);
       margin-bottom: 4px;
       font-size: 11px;
       text-transform: uppercase;
@@ -381,7 +624,7 @@
 
     .stat-value {
       font-size: 18px;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       font-weight: 600;
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
@@ -396,42 +639,42 @@
     }
 
     ::-webkit-scrollbar-track {
-      background: #1e1e1e;
+      background: var(--color-bg-scrollbar-track);
     }
 
     ::-webkit-scrollbar-thumb {
-      background: #424242;
+      background: var(--color-bg-scrollbar-thumb);
       border-radius: 5px;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background: #4e4e4e;
+      background: var(--color-bg-scrollbar-thumb-hover);
     }
 
     .save-status {
       margin-top: 8px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
     }
 
     .prompt-card {
-      border-color: #6e40c9;
+      border-color: var(--color-border-prompt);
-      background: #2d1b4e;
+      background: var(--color-bg-prompt);
     }
 
     .prompt-card:hover {
-      border-color: #8e6cdb;
+      border-color: var(--color-border-prompt-hover);
     }
 
     .prompt-card .card-type {
-      background: #6e40c920;
+      background: var(--color-prompt-badge-bg);
-      color: #8e6cdb;
+      color: var(--color-prompt-badge-text);
     }
 
     .card-content {
       margin-top: 12px;
       line-height: 1.6;
-      color: #cccccc;
+      color: var(--color-text-primary);
       white-space: pre-wrap;
       word-wrap: break-word;
     }
@@ -440,7 +683,7 @@
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      color: #58a6ff;
+      color: var(--color-accent-focus);
       font-size: 11px;
       font-weight: 500;
       margin-left: auto;
@@ -449,8 +692,8 @@
     .spinner {
       width: 12px;
       height: 12px;
-      border: 2px solid #404040;
+      border: 2px solid var(--color-border-primary);
-      border-top-color: #58a6ff;
+      border-top-color: var(--color-accent-focus);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
@@ -471,7 +714,7 @@
 
     .skeleton-line {
       height: 16px;
-      background: linear-gradient(90deg, #404040 25%, #505050 50%, #404040 75%);
+      background: linear-gradient(90deg, var(--color-skeleton-base) 25%, var(--color-skeleton-highlight) 50%, var(--color-skeleton-base) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: 4px;

src/ui/viewer-template.html

@@ -15,6 +15,246 @@
       font-display: swap;
     }
 
+    /* Theme Variables - Light Mode */
+    :root,
+    [data-theme="light"] {
+      --color-bg-primary: #ffffff;
+      --color-bg-secondary: #f6f8fa;
+      --color-bg-tertiary: #f0f0f0;
+      --color-bg-header: #f6f8fa;
+      --color-bg-card: #ffffff;
+      --color-bg-card-hover: #f6f8fa;
+      --color-bg-input: #ffffff;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #fffbf0;
+      --color-bg-prompt: #f6f3fb;
+      --color-bg-stat: #f6f8fa;
+      --color-bg-scrollbar-track: #ffffff;
+      --color-bg-scrollbar-thumb: #d1d5da;
+      --color-bg-scrollbar-thumb-hover: #b1b5ba;
+
+      --color-border-primary: #d0d7de;
+      --color-border-secondary: #d8dee4;
+      --color-border-hover: #0969da;
+      --color-border-focus: #0969da;
+      --color-border-summary: #d4a72c;
+      --color-border-summary-hover: #c29d29;
+      --color-border-prompt: #8250df;
+      --color-border-prompt-hover: #6e40c9;
+
+      --color-text-primary: #24292f;
+      --color-text-secondary: #57606a;
+      --color-text-tertiary: #6e7781;
+      --color-text-muted: #8b949e;
+      --color-text-header: #24292f;
+      --color-text-title: #24292f;
+      --color-text-subtitle: #57606a;
+      --color-text-button: #ffffff;
+      --color-text-summary: #8a6116;
+      --color-text-logo: #24292f;
+
+      --color-accent-primary: #0969da;
+      --color-accent-focus: #0969da;
+      --color-accent-success: #1a7f37;
+      --color-accent-error: #d1242f;
+      --color-accent-summary: #9a6700;
+      --color-accent-prompt: #8250df;
+
+      --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+      --color-type-badge-text: #0969da;
+      --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+      --color-summary-badge-text: #9a6700;
+      --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+      --color-prompt-badge-text: #8250df;
+
+      --color-skeleton-base: #d0d7de;
+      --color-skeleton-highlight: #e8ecef;
+
+      --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+    }
+
+    /* Theme Variables - Dark Mode */
+    [data-theme="dark"] {
+      --color-bg-primary: #1e1e1e;
+      --color-bg-secondary: #2d2d2d;
+      --color-bg-tertiary: #252526;
+      --color-bg-header: #252526;
+      --color-bg-card: #2d2d2d;
+      --color-bg-card-hover: #333333;
+      --color-bg-input: #2d2d2d;
+      --color-bg-button: #0969da;
+      --color-bg-button-hover: #1177e6;
+      --color-bg-button-active: #0860ca;
+      --color-bg-summary: #3d2f00;
+      --color-bg-prompt: #2d1b4e;
+      --color-bg-stat: #2d2d2d;
+      --color-bg-scrollbar-track: #1e1e1e;
+      --color-bg-scrollbar-thumb: #424242;
+      --color-bg-scrollbar-thumb-hover: #4e4e4e;
+
+      --color-border-primary: #404040;
+      --color-border-secondary: #404040;
+      --color-border-hover: #505050;
+      --color-border-focus: #58a6ff;
+      --color-border-summary: #9e6a03;
+      --color-border-summary-hover: #ae7a13;
+      --color-border-prompt: #6e40c9;
+      --color-border-prompt-hover: #8e6cdb;
+
+      --color-text-primary: #cccccc;
+      --color-text-secondary: #a0a0a0;
+      --color-text-tertiary: #6e7681;
+      --color-text-muted: #8b949e;
+      --color-text-header: #e0e0e0;
+      --color-text-title: #e0e0e0;
+      --color-text-subtitle: #a0a0a0;
+      --color-text-button: #ffffff;
+      --color-text-summary: #f2cc60;
+      --color-text-logo: #dadada;
+
+      --color-accent-primary: #58a6ff;
+      --color-accent-focus: #58a6ff;
+      --color-accent-success: #16c60c;
+      --color-accent-error: #e74856;
+      --color-accent-summary: #f2cc60;
+      --color-accent-prompt: #8e6cdb;
+
+      --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+      --color-type-badge-text: #58a6ff;
+      --color-summary-badge-bg: rgba(242, 204, 96, 0.125);
+      --color-summary-badge-text: #f2cc60;
+      --color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
+      --color-prompt-badge-text: #8e6cdb;
+
+      --color-skeleton-base: #404040;
+      --color-skeleton-highlight: #505050;
+
+      --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+    }
+
+    /* System preference default */
+    @media (prefers-color-scheme: light) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #ffffff;
+        --color-bg-secondary: #f6f8fa;
+        --color-bg-tertiary: #f0f0f0;
+        --color-bg-header: #f6f8fa;
+        --color-bg-card: #ffffff;
+        --color-bg-card-hover: #f6f8fa;
+        --color-bg-input: #ffffff;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #fffbf0;
+        --color-bg-prompt: #f6f3fb;
+        --color-bg-stat: #f6f8fa;
+        --color-bg-scrollbar-track: #ffffff;
+        --color-bg-scrollbar-thumb: #d1d5da;
+        --color-bg-scrollbar-thumb-hover: #b1b5ba;
+
+        --color-border-primary: #d0d7de;
+        --color-border-secondary: #d8dee4;
+        --color-border-hover: #0969da;
+        --color-border-focus: #0969da;
+        --color-border-summary: #d4a72c;
+        --color-border-summary-hover: #c29d29;
+        --color-border-prompt: #8250df;
+        --color-border-prompt-hover: #6e40c9;
+
+        --color-text-primary: #24292f;
+        --color-text-secondary: #57606a;
+        --color-text-tertiary: #6e7781;
+        --color-text-muted: #8b949e;
+        --color-text-header: #24292f;
+        --color-text-title: #24292f;
+        --color-text-subtitle: #57606a;
+        --color-text-button: #ffffff;
+        --color-text-summary: #8a6116;
+        --color-text-logo: #24292f;
+
+        --color-accent-primary: #0969da;
+        --color-accent-focus: #0969da;
+        --color-accent-success: #1a7f37;
+        --color-accent-error: #d1242f;
+        --color-accent-summary: #9a6700;
+        --color-accent-prompt: #8250df;
+
+        --color-type-badge-bg: rgba(9, 105, 218, 0.12);
+        --color-type-badge-text: #0969da;
+        --color-summary-badge-bg: rgba(154, 103, 0, 0.12);
+        --color-summary-badge-text: #9a6700;
+        --color-prompt-badge-bg: rgba(130, 80, 223, 0.12);
+        --color-prompt-badge-text: #8250df;
+
+        --color-skeleton-base: #d0d7de;
+        --color-skeleton-highlight: #e8ecef;
+
+        --shadow-focus: 0 0 0 2px rgba(9, 105, 218, 0.3);
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme]) {
+        --color-bg-primary: #1e1e1e;
+        --color-bg-secondary: #2d2d2d;
+        --color-bg-tertiary: #252526;
+        --color-bg-header: #252526;
+        --color-bg-card: #2d2d2d;
+        --color-bg-card-hover: #333333;
+        --color-bg-input: #2d2d2d;
+        --color-bg-button: #0969da;
+        --color-bg-button-hover: #1177e6;
+        --color-bg-button-active: #0860ca;
+        --color-bg-summary: #3d2f00;
+        --color-bg-prompt: #2d1b4e;
+        --color-bg-stat: #2d2d2d;
+        --color-bg-scrollbar-track: #1e1e1e;
+        --color-bg-scrollbar-thumb: #424242;
+        --color-bg-scrollbar-thumb-hover: #4e4e4e;
+
+        --color-border-primary: #404040;
+        --color-border-secondary: #404040;
+        --color-border-hover: #505050;
+        --color-border-focus: #58a6ff;
+        --color-border-summary: #9e6a03;
+        --color-border-summary-hover: #ae7a13;
+        --color-border-prompt: #6e40c9;
+        --color-border-prompt-hover: #8e6cdb;
+
+        --color-text-primary: #cccccc;
+        --color-text-secondary: #a0a0a0;
+        --color-text-tertiary: #6e7681;
+        --color-text-muted: #8b949e;
+        --color-text-header: #e0e0e0;
+        --color-text-title: #e0e0e0;
+        --color-text-subtitle: #a0a0a0;
+        --color-text-button: #ffffff;
+        --color-text-summary: #f2cc60;
+        --color-text-logo: #dadada;
+
+        --color-accent-primary: #58a6ff;
+        --color-accent-focus: #58a6ff;
+        --color-accent-success: #16c60c;
+        --color-accent-error: #e74856;
+        --color-accent-summary: #f2cc60;
+        --color-accent-prompt: #8e6cdb;
+
+        --color-type-badge-bg: rgba(88, 166, 255, 0.125);
+        --color-type-badge-text: #58a6ff;
+        --color-summary-badge-bg: rgba(242, 204, 96, 0.125);
+        --color-summary-badge-text: #f2cc60;
+        --color-prompt-badge-bg: rgba(110, 64, 201, 0.125);
+        --color-prompt-badge-text: #8e6cdb;
+
+        --color-skeleton-base: #404040;
+        --color-skeleton-highlight: #505050;
+
+        --shadow-focus: 0 0 0 2px rgba(88, 166, 255, 0.2);
+      }
+    }
+
     * {
       margin: 0;
       padding: 0;
@@ -23,8 +263,8 @@
 
     body {
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-      background: #1e1e1e;
+      background: var(--color-bg-primary);
-      color: #cccccc;
+      color: var(--color-text-primary);
       font-size: 14px;
       overflow: hidden;
     }
@@ -48,8 +288,8 @@
       top: 0;
       width: 400px;
       height: 100vh;
-      background: #1e1e1e;
+      background: var(--color-bg-primary);
-      border-left: 1px solid #404040;
+      border-left: 1px solid var(--color-border-primary);
       display: flex;
       flex-direction: column;
       transform: translate3d(100%, 0, 0);
@@ -64,32 +304,32 @@
 
     .header {
       padding: 14px 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #252526;
+      background: var(--color-bg-header);
     }
 
     .sidebar-header {
       padding: 14px 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
       display: flex;
       justify-content: space-between;
       align-items: center;
-      background: #252526;
+      background: var(--color-bg-header);
     }
 
     .sidebar-header h1 {
       font-size: 16px;
       font-weight: 500;
-      color: #e0e0e0;
+      color: var(--color-text-header);
     }
 
     .header h1 {
       font-size: 16px;
       font-weight: 500;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       display: flex;
       align-items: center;
       gap: 10px;
@@ -113,7 +353,7 @@
       font-weight: 100;
       font-size: 20px;
       letter-spacing: -0.03em;
-      color: #dadada;
+      color: var(--color-text-logo);
     }
 
     .status {
@@ -123,9 +363,10 @@
       font-size: 13px;
     }
 
-    .settings-btn {
+    .settings-btn,
+    .theme-toggle-btn {
       background: transparent;
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       padding: 8px;
       width: 36px;
       height: 36px;
@@ -133,22 +374,24 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      color: #cccccc;
+      color: var(--color-text-primary);
       transition: all 0.15s ease;
     }
 
-    .settings-btn:hover {
+    .settings-btn:hover,
-      background: #2d2d2d;
+    .theme-toggle-btn:hover {
-      border-color: #58a6ff;
+      background: var(--color-bg-secondary);
+      border-color: var(--color-border-focus);
     }
 
     .settings-btn.active {
-      background: #0969da;
+      background: var(--color-bg-button);
-      border-color: #0969da;
+      border-color: var(--color-bg-button);
-      color: white;
+      color: var(--color-text-button);
     }
 
-    .settings-icon {
+    .settings-icon,
+    .theme-toggle-btn svg {
       width: 18px;
       height: 18px;
     }
@@ -157,12 +400,12 @@
       width: 8px;
       height: 8px;
       border-radius: 50%;
-      background: #e74856;
+      background: var(--color-accent-error);
       animation: pulse 2s ease-in-out infinite;
     }
 
     .status-dot.connected {
-      background: #16c60c;
+      background: var(--color-accent-success);
       animation: none;
     }
 
@@ -181,9 +424,9 @@
     select,
     input,
     button {
-      background: #2d2d2d;
+      background: var(--color-bg-input);
-      color: #cccccc;
+      color: var(--color-text-primary);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       padding: 6px 12px;
       font-family: inherit;
       font-size: 13px;
@@ -193,30 +436,30 @@
 
     select:hover,
     input:hover {
-      border-color: #58a6ff;
+      border-color: var(--color-border-focus);
     }
 
     select:focus,
     input:focus {
       outline: none;
-      border-color: #58a6ff;
+      border-color: var(--color-border-focus);
-      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
+      box-shadow: var(--shadow-focus);
     }
 
     button {
-      background: #0969da;
+      background: var(--color-bg-button);
-      color: #ffffff;
+      color: var(--color-text-button);
       border: none;
       font-weight: 500;
       cursor: pointer;
     }
 
     button:hover:not(:disabled) {
-      background: #1177e6;
+      background: var(--color-bg-button-hover);
     }
 
     button:active:not(:disabled) {
-      background: #0860ca;
+      background: var(--color-bg-button-active);
     }
 
     button:disabled {
@@ -240,8 +483,8 @@
     .card {
       margin-bottom: 24px;
       padding: 20px 24px;
-      background: #2d2d2d;
+      background: var(--color-bg-card);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       border-radius: 8px;
       transition: all 0.15s ease;
       animation: slideIn 0.3s ease-out;
@@ -261,7 +504,7 @@
     }
 
     .card:hover {
-      border-color: #505050;
+      border-color: var(--color-border-hover);
     }
 
     .card-header {
@@ -270,14 +513,14 @@
       gap: 10px;
       margin-bottom: 8px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .card-type {
       padding: 2px 8px;
-      background: #58a6ff20;
+      background: var(--color-type-badge-bg);
-      color: #58a6ff;
+      color: var(--color-type-badge-text);
       border-radius: 3px;
       font-weight: 500;
       text-transform: uppercase;
@@ -288,7 +531,7 @@
     .card-title {
       font-size: 17px;
       margin-bottom: 8px;
-      color: #e0e0e0;
+      color: var(--color-text-title);
       font-weight: 600;
       line-height: 1.4;
       letter-spacing: -0.01em;
@@ -296,46 +539,46 @@
 
     .card-subtitle {
       font-size: 14px;
-      color: #a0a0a0;
+      color: var(--color-text-subtitle);
       margin-bottom: 8px;
       line-height: 1.6;
     }
 
     .card-meta {
       font-size: 12px;
-      color: #6e7681;
+      color: var(--color-text-tertiary);
       margin-top: 8px;
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .summary-card {
-      border-color: #9e6a03;
+      border-color: var(--color-border-summary);
-      background: #3d2f00;
+      background: var(--color-bg-summary);
     }
 
     .summary-card:hover {
-      border-color: #ae7a13;
+      border-color: var(--color-border-summary-hover);
     }
 
     .summary-card .card-type {
-      background: #f2cc6020;
+      background: var(--color-summary-badge-bg);
-      color: #f2cc60;
+      color: var(--color-summary-badge-text);
     }
 
     .summary-card .card-title {
-      color: #f2cc60;
+      color: var(--color-text-summary);
     }
 
     .settings-section {
       padding: 18px;
-      border-bottom: 1px solid #404040;
+      border-bottom: 1px solid var(--color-border-primary);
     }
 
     .settings-section h3 {
       font-size: 14px;
       font-weight: 600;
       margin-bottom: 14px;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       letter-spacing: 0.3px;
     }
 
@@ -347,13 +590,13 @@
       display: block;
       margin-bottom: 6px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
 
     .setting-description {
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
       margin-bottom: 8px;
       line-height: 1.5;
     }
@@ -366,13 +609,13 @@
 
     .stat {
       padding: 10px 12px;
-      background: #2d2d2d;
+      background: var(--color-bg-stat);
-      border: 1px solid #404040;
+      border: 1px solid var(--color-border-primary);
       border-radius: 4px;
     }
 
     .stat-label {
-      color: #8b949e;
+      color: var(--color-text-muted);
       margin-bottom: 4px;
       font-size: 11px;
       text-transform: uppercase;
@@ -381,7 +624,7 @@
 
     .stat-value {
       font-size: 18px;
-      color: #e0e0e0;
+      color: var(--color-text-header);
       font-weight: 600;
       font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
     }
@@ -396,42 +639,42 @@
     }
 
     ::-webkit-scrollbar-track {
-      background: #1e1e1e;
+      background: var(--color-bg-scrollbar-track);
     }
 
     ::-webkit-scrollbar-thumb {
-      background: #424242;
+      background: var(--color-bg-scrollbar-thumb);
       border-radius: 5px;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-      background: #4e4e4e;
+      background: var(--color-bg-scrollbar-thumb-hover);
     }
 
     .save-status {
       margin-top: 8px;
       font-size: 12px;
-      color: #8b949e;
+      color: var(--color-text-muted);
     }
 
     .prompt-card {
-      border-color: #6e40c9;
+      border-color: var(--color-border-prompt);
-      background: #2d1b4e;
+      background: var(--color-bg-prompt);
     }
 
     .prompt-card:hover {
-      border-color: #8e6cdb;
+      border-color: var(--color-border-prompt-hover);
     }
 
     .prompt-card .card-type {
-      background: #6e40c920;
+      background: var(--color-prompt-badge-bg);
-      color: #8e6cdb;
+      color: var(--color-prompt-badge-text);
     }
 
     .card-content {
       margin-top: 12px;
       line-height: 1.6;
-      color: #cccccc;
+      color: var(--color-text-primary);
       white-space: pre-wrap;
       word-wrap: break-word;
     }
@@ -440,7 +683,7 @@
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      color: #58a6ff;
+      color: var(--color-accent-focus);
       font-size: 11px;
       font-weight: 500;
       margin-left: auto;
@@ -449,8 +692,8 @@
     .spinner {
       width: 12px;
       height: 12px;
-      border: 2px solid #404040;
+      border: 2px solid var(--color-border-primary);
-      border-top-color: #58a6ff;
+      border-top-color: var(--color-accent-focus);
       border-radius: 50%;
       animation: spin 0.8s linear infinite;
     }
@@ -471,7 +714,7 @@
 
     .skeleton-line {
       height: 16px;
-      background: linear-gradient(90deg, #404040 25%, #505050 50%, #404040 75%);
+      background: linear-gradient(90deg, var(--color-skeleton-base) 25%, var(--color-skeleton-highlight) 50%, var(--color-skeleton-base) 75%);
       background-size: 200% 100%;
       animation: shimmer 1.5s infinite;
       border-radius: 4px;

src/ui/viewer/App.tsx

@@ -6,6 +6,7 @@ import { useSSE } from './hooks/useSSE';
 import { useSettings } from './hooks/useSettings';
 import { useStats } from './hooks/useStats';
 import { usePagination } from './hooks/usePagination';
+import { useTheme } from './hooks/useTheme';
 import { Observation, Summary, UserPrompt } from './types';
 import { mergeAndDeduplicateByProject } from './utils/data';
 
@@ -19,6 +20,7 @@ export function App() {
   const { observations, summaries, prompts, projects, processingSessions, isConnected } = useSSE();
   const { settings, saveSettings, isSaving, saveStatus } = useSettings();
   const { stats } = useStats();
+  const { preference, resolvedTheme, setThemePreference } = useTheme();
   const pagination = usePagination(currentFilter);
 
   // Reset paginated data when filter changes
@@ -88,6 +90,8 @@ export function App() {
           onSettingsToggle={toggleSidebar}
           sidebarOpen={sidebarOpen}
           isProcessing={processingSessions.size > 0}
+          themePreference={preference}
+          onThemeChange={setThemePreference}
         />
         <Feed
           observations={allObservations}

src/ui/viewer/components/Header.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { ThemeToggle } from './ThemeToggle';
+import { ThemePreference } from '../hooks/useTheme';
 
 interface HeaderProps {
   isConnected: boolean;
@@ -8,6 +10,8 @@ interface HeaderProps {
   onSettingsToggle: () => void;
   sidebarOpen: boolean;
   isProcessing: boolean;
+  themePreference: ThemePreference;
+  onThemeChange: (theme: ThemePreference) => void;
 }
 
 export function Header({
@@ -17,7 +21,9 @@ export function Header({
   onFilterChange,
   onSettingsToggle,
   sidebarOpen,
-  isProcessing
+  isProcessing,
+  themePreference,
+  onThemeChange
 }: HeaderProps) {
   return (
     <div className="header">
@@ -73,6 +79,10 @@ export function Header({
             <option key={project} value={project}>{project}</option>
           ))}
         </select>
+        <ThemeToggle
+          preference={themePreference}
+          onThemeChange={onThemeChange}
+        />
         <button
           className={`settings-btn ${sidebarOpen ? 'active' : ''}`}
           onClick={onSettingsToggle}

src/ui/viewer/components/ThemeToggle.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ThemePreference } from '../hooks/useTheme';
+
+interface ThemeToggleProps {
+  preference: ThemePreference;
+  onThemeChange: (theme: ThemePreference) => void;
+}
+
+export function ThemeToggle({ preference, onThemeChange }: ThemeToggleProps) {
+  const cycleTheme = () => {
+    const cycle: ThemePreference[] = ['system', 'light', 'dark'];
+    const currentIndex = cycle.indexOf(preference);
+    const nextIndex = (currentIndex + 1) % cycle.length;
+    onThemeChange(cycle[nextIndex]);
+  };
+
+  const getIcon = () => {
+    switch (preference) {
+      case 'light':
+        return (
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <circle cx="12" cy="12" r="5"></circle>
+            <line x1="12" y1="1" x2="12" y2="3"></line>
+            <line x1="12" y1="21" x2="12" y2="23"></line>
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+            <line x1="1" y1="12" x2="3" y2="12"></line>
+            <line x1="21" y1="12" x2="23" y2="12"></line>
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+          </svg>
+        );
+      case 'dark':
+        return (
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+          </svg>
+        );
+      case 'system':
+      default:
+        return (
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+            <line x1="8" y1="21" x2="16" y2="21"></line>
+            <line x1="12" y1="17" x2="12" y2="21"></line>
+          </svg>
+        );
+    }
+  };
+
+  const getTitle = () => {
+    switch (preference) {
+      case 'light':
+        return 'Theme: Light (click for Dark)';
+      case 'dark':
+        return 'Theme: Dark (click for System)';
+      case 'system':
+      default:
+        return 'Theme: System (click for Light)';
+    }
+  };
+
+  return (
+    <button
+      className="theme-toggle-btn"
+      onClick={cycleTheme}
+      title={getTitle()}
+      aria-label={getTitle()}
+    >
+      {getIcon()}
+    </button>
+  );
+}

src/ui/viewer/hooks/useTheme.ts

@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+
+export type ThemePreference = 'system' | 'light' | 'dark';
+export type ResolvedTheme = 'light' | 'dark';
+
+const STORAGE_KEY = 'claude-mem-theme';
+
+function getSystemTheme(): ResolvedTheme {
+  if (typeof window === 'undefined') return 'dark';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function getStoredPreference(): ThemePreference {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'system' || stored === 'light' || stored === 'dark') {
+      return stored;
+    }
+  } catch (e) {
+    console.warn('Failed to read theme preference from localStorage:', e);
+  }
+  return 'system';
+}
+
+function resolveTheme(preference: ThemePreference): ResolvedTheme {
+  if (preference === 'system') {
+    return getSystemTheme();
+  }
+  return preference;
+}
+
+export function useTheme() {
+  const [preference, setPreference] = useState<ThemePreference>(getStoredPreference);
+  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>(() =>
+    resolveTheme(getStoredPreference())
+  );
+
+  // Update resolved theme when preference changes
+  useEffect(() => {
+    const newResolvedTheme = resolveTheme(preference);
+    setResolvedTheme(newResolvedTheme);
+    document.documentElement.setAttribute('data-theme', newResolvedTheme);
+  }, [preference]);
+
+  // Listen for system theme changes when preference is 'system'
+  useEffect(() => {
+    if (preference !== 'system') return;
+
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      const newTheme = e.matches ? 'dark' : 'light';
+      setResolvedTheme(newTheme);
+      document.documentElement.setAttribute('data-theme', newTheme);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, [preference]);
+
+  const setThemePreference = (newPreference: ThemePreference) => {
+    try {
+      localStorage.setItem(STORAGE_KEY, newPreference);
+      setPreference(newPreference);
+    } catch (e) {
+      console.warn('Failed to save theme preference to localStorage:', e);
+      // Still update the theme even if localStorage fails
+      setPreference(newPreference);
+    }
+  };
+
+  return {
+    preference,
+    resolvedTheme,
+    setThemePreference
+  };
+}