ThemeToggle.tsx

ThemeToggle.tsx: UI component for frontend provides theme toggle, managing light/dark mode switch, adjusts UI styling, integrates for quick theme switching.

// ---------------------------------------------------------------------------
// OpenBrowserClaw — Theme toggle component
// ---------------------------------------------------------------------------

import { useThemeStore, type ThemeChoice } from '../../stores/theme-store.js';
import { Sun, Moon, Monitor } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';

const options: { value: ThemeChoice; label: string; icon: LucideIcon }[] = [
  { value: 'light', label: 'Light', icon: Sun },
  { value: 'dark', label: 'Dark', icon: Moon },
  { value: 'system', label: 'System', icon: Monitor },
];

export function ThemeToggle() {
  const { theme, setTheme } = useThemeStore();
  const ActiveIcon = options.find((o) => o.value === theme)?.icon ?? Monitor;

  return (
    <div classNa

... (truncated -- full source via MCP)