diff --git a/ui/src/components/ThemeSelector.tsx b/ui/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000..025ec8d
--- /dev/null
+++ b/ui/src/components/ThemeSelector.tsx
@@ -0,0 +1,155 @@
+import { useState, useRef, useEffect } from 'react'
+import { Palette, Check } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import type { ThemeId, ThemeOption } from '../hooks/useTheme'
+
+interface ThemeSelectorProps {
+ themes: ThemeOption[]
+ currentTheme: ThemeId
+ onThemeChange: (theme: ThemeId) => void
+}
+
+export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSelectorProps) {
+ const [isOpen, setIsOpen] = useState(false)
+ const [previewTheme, setPreviewTheme] = useState
(null)
+ const containerRef = useRef(null)
+ const timeoutRef = useRef(null)
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+ setIsOpen(false)
+ setPreviewTheme(null)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ // Apply preview theme temporarily
+ useEffect(() => {
+ if (previewTheme) {
+ const root = document.documentElement
+ root.classList.remove('theme-claude', 'theme-neo-brutalism')
+ if (previewTheme === 'claude') {
+ root.classList.add('theme-claude')
+ } else if (previewTheme === 'neo-brutalism') {
+ root.classList.add('theme-neo-brutalism')
+ }
+ }
+
+ // Cleanup: restore current theme when preview ends
+ return () => {
+ if (previewTheme) {
+ const root = document.documentElement
+ root.classList.remove('theme-claude', 'theme-neo-brutalism')
+ if (currentTheme === 'claude') {
+ root.classList.add('theme-claude')
+ } else if (currentTheme === 'neo-brutalism') {
+ root.classList.add('theme-neo-brutalism')
+ }
+ }
+ }
+ }, [previewTheme, currentTheme])
+
+ const handleMouseEnter = () => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current)
+ }
+ setIsOpen(true)
+ }
+
+ const handleMouseLeave = () => {
+ timeoutRef.current = setTimeout(() => {
+ setIsOpen(false)
+ setPreviewTheme(null)
+ }, 150)
+ }
+
+ const handleThemeHover = (themeId: ThemeId) => {
+ setPreviewTheme(themeId)
+ }
+
+ const handleThemeClick = (themeId: ThemeId) => {
+ onThemeChange(themeId)
+ setPreviewTheme(null)
+ setIsOpen(false)
+ }
+
+ return (
+
+
+
+ {/* Dropdown */}
+ {isOpen && (
+
+
+ {themes.map((theme) => (
+
+ ))}
+
+
+ )}
+