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.

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
+  };
+}