diff --git a/ui/index.html b/ui/index.html
index 3be92ba..5dd6b18 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -7,7 +7,7 @@
AutoCoder
-
+
diff --git a/ui/src/components/ThemeSelector.tsx b/ui/src/components/ThemeSelector.tsx
index 025ec8d..9cd0ac1 100644
--- a/ui/src/components/ThemeSelector.tsx
+++ b/ui/src/components/ThemeSelector.tsx
@@ -32,11 +32,13 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
useEffect(() => {
if (previewTheme) {
const root = document.documentElement
- root.classList.remove('theme-claude', 'theme-neo-brutalism')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
if (previewTheme === 'claude') {
root.classList.add('theme-claude')
} else if (previewTheme === 'neo-brutalism') {
root.classList.add('theme-neo-brutalism')
+ } else if (previewTheme === 'retro-arcade') {
+ root.classList.add('theme-retro-arcade')
}
}
@@ -44,11 +46,13 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
return () => {
if (previewTheme) {
const root = document.documentElement
- root.classList.remove('theme-claude', 'theme-neo-brutalism')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
if (currentTheme === 'claude') {
root.classList.add('theme-claude')
} else if (currentTheme === 'neo-brutalism') {
root.classList.add('theme-neo-brutalism')
+ } else if (currentTheme === 'retro-arcade') {
+ root.classList.add('theme-retro-arcade')
}
}
}
diff --git a/ui/src/hooks/useTheme.ts b/ui/src/hooks/useTheme.ts
index 5acfda2..605d0cb 100644
--- a/ui/src/hooks/useTheme.ts
+++ b/ui/src/hooks/useTheme.ts
@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from 'react'
-export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism'
+export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade'
export interface ThemeOption {
id: ThemeId
@@ -31,6 +31,12 @@ export const THEMES: ThemeOption[] = [
name: 'Neo Brutalism',
description: 'Bold colors with hard shadows',
previewColors: { primary: '#ff4d00', background: '#ffffff', accent: '#ffeb00' }
+ },
+ {
+ id: 'retro-arcade',
+ name: 'Retro Arcade',
+ description: 'Vibrant pink and teal pixel vibes',
+ previewColors: { primary: '#e8457c', background: '#f0e6d3', accent: '#4eb8a5' }
}
]
@@ -45,6 +51,8 @@ function getThemeClass(themeId: ThemeId): string {
return 'theme-claude'
case 'neo-brutalism':
return 'theme-neo-brutalism'
+ case 'retro-arcade':
+ return 'theme-retro-arcade'
default:
return ''
}
@@ -54,7 +62,7 @@ export function useTheme() {
const [theme, setThemeState] = useState(() => {
try {
const stored = localStorage.getItem(THEME_STORAGE_KEY)
- if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism') {
+ if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade') {
return stored
}
} catch {
@@ -76,7 +84,7 @@ export function useTheme() {
const root = document.documentElement
// Remove all theme classes
- root.classList.remove('theme-claude', 'theme-neo-brutalism')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
// Add current theme class (if not twitter/default)
const themeClass = getThemeClass(theme)
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
index edbe89a..ef5b3e6 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -357,6 +357,122 @@
--color-status-done: oklch(0.4500 0.1500 130);
}
+/* ============================================================================
+ Theme: Retro Arcade
+ Vibrant pink and teal with pixel-art inspired styling
+ ============================================================================ */
+
+.theme-retro-arcade {
+ --radius: 0.25rem;
+ --background: oklch(0.9735 0.0261 90.0953);
+ --foreground: oklch(0.3092 0.0518 219.6516);
+ --card: oklch(0.9306 0.0260 92.4020);
+ --card-foreground: oklch(0.3092 0.0518 219.6516);
+ --popover: oklch(0.9306 0.0260 92.4020);
+ --popover-foreground: oklch(0.3092 0.0518 219.6516);
+ --primary: oklch(0.5924 0.2025 355.8943);
+ --primary-foreground: oklch(1.0000 0 0);
+ --secondary: oklch(0.6437 0.1019 187.3840);
+ --secondary-foreground: oklch(1.0000 0 0);
+ --muted: oklch(0.6979 0.0159 196.7940);
+ --muted-foreground: oklch(0.3092 0.0518 219.6516);
+ --accent: oklch(0.5808 0.1732 39.5003);
+ --accent-foreground: oklch(1.0000 0 0);
+ --destructive: oklch(0.5863 0.2064 27.1172);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --border: oklch(0.6537 0.0197 205.2618);
+ --input: oklch(0.6537 0.0197 205.2618);
+ --ring: oklch(0.5924 0.2025 355.8943);
+ --chart-1: oklch(0.6149 0.1394 244.9273);
+ --chart-2: oklch(0.6437 0.1019 187.3840);
+ --chart-3: oklch(0.5924 0.2025 355.8943);
+ --chart-4: oklch(0.5808 0.1732 39.5003);
+ --chart-5: oklch(0.5863 0.2064 27.1172);
+ --sidebar: oklch(0.9735 0.0261 90.0953);
+ --sidebar-foreground: oklch(0.3092 0.0518 219.6516);
+ --sidebar-primary: oklch(0.5924 0.2025 355.8943);
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
+ --sidebar-accent: oklch(0.6437 0.1019 187.3840);
+ --sidebar-accent-foreground: oklch(1.0000 0 0);
+ --sidebar-border: oklch(0.6537 0.0197 205.2618);
+ --sidebar-ring: oklch(0.5924 0.2025 355.8943);
+
+ /* Shadow variables - retro arcade style */
+ --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
+ --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
+
+ /* Log level colors */
+ --color-log-error: #e8457c;
+ --color-log-warning: #d98c4f;
+ --color-log-info: #4eb8a5;
+ --color-log-debug: #6b8a8f;
+ --color-log-success: #6bbd6b;
+
+ /* Status colors for Kanban */
+ --color-status-pending: oklch(0.9306 0.0260 92.4020);
+ --color-status-progress: oklch(0.6437 0.1019 187.3840);
+ --color-status-done: oklch(0.5924 0.2025 355.8943);
+
+ /* Font stacks - Outfit for Retro Arcade */
+ --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
+ --font-mono: 'Space Mono', 'JetBrains Mono', monospace;
+}
+
+.theme-retro-arcade.dark {
+ --background: oklch(0.2673 0.0486 219.8169);
+ --foreground: oklch(0.6979 0.0159 196.7940);
+ --card: oklch(0.3092 0.0518 219.6516);
+ --card-foreground: oklch(0.6979 0.0159 196.7940);
+ --popover: oklch(0.3092 0.0518 219.6516);
+ --popover-foreground: oklch(0.6979 0.0159 196.7940);
+ --primary: oklch(0.5924 0.2025 355.8943);
+ --primary-foreground: oklch(1.0000 0 0);
+ --secondary: oklch(0.6437 0.1019 187.3840);
+ --secondary-foreground: oklch(1.0000 0 0);
+ --muted: oklch(0.5230 0.0283 219.1365);
+ --muted-foreground: oklch(0.6979 0.0159 196.7940);
+ --accent: oklch(0.5808 0.1732 39.5003);
+ --accent-foreground: oklch(1.0000 0 0);
+ --destructive: oklch(0.5863 0.2064 27.1172);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --border: oklch(0.5230 0.0283 219.1365);
+ --input: oklch(0.5230 0.0283 219.1365);
+ --ring: oklch(0.5924 0.2025 355.8943);
+ --chart-1: oklch(0.6149 0.1394 244.9273);
+ --chart-2: oklch(0.6437 0.1019 187.3840);
+ --chart-3: oklch(0.5924 0.2025 355.8943);
+ --chart-4: oklch(0.5808 0.1732 39.5003);
+ --chart-5: oklch(0.5863 0.2064 27.1172);
+ --sidebar: oklch(0.2673 0.0486 219.8169);
+ --sidebar-foreground: oklch(0.6979 0.0159 196.7940);
+ --sidebar-primary: oklch(0.5924 0.2025 355.8943);
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
+ --sidebar-accent: oklch(0.6437 0.1019 187.3840);
+ --sidebar-accent-foreground: oklch(1.0000 0 0);
+ --sidebar-border: oklch(0.5230 0.0283 219.1365);
+ --sidebar-ring: oklch(0.5924 0.2025 355.8943);
+
+ /* Shadow variables - retro arcade dark mode */
+ --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
+ --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
+ --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
+
+ /* Log level colors for dark mode */
+ --color-log-error: #f06b99;
+ --color-log-warning: #e8a870;
+ --color-log-info: #6ecfbd;
+ --color-log-debug: #8ba5aa;
+ --color-log-success: #8bd68b;
+
+ /* Status colors for Kanban - dark mode */
+ --color-status-pending: oklch(0.3092 0.0518 219.6516);
+ --color-status-progress: oklch(0.5230 0.0800 187);
+ --color-status-done: oklch(0.5000 0.1500 355);
+}
+
/* ============================================================================
ShadCN Tailwind v4 Theme Integration
============================================================================ */