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