diff --git a/ui/index.html b/ui/index.html
index 5dd6b18..9564da9 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 9cd0ac1..3ecff1a 100644
--- a/ui/src/components/ThemeSelector.tsx
+++ b/ui/src/components/ThemeSelector.tsx
@@ -32,13 +32,15 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
useEffect(() => {
if (previewTheme) {
const root = document.documentElement
- root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
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')
+ } else if (previewTheme === 'aurora') {
+ root.classList.add('theme-aurora')
}
}
@@ -46,13 +48,15 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
return () => {
if (previewTheme) {
const root = document.documentElement
- root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
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')
+ } else if (currentTheme === 'aurora') {
+ root.classList.add('theme-aurora')
}
}
}
diff --git a/ui/src/hooks/useTheme.ts b/ui/src/hooks/useTheme.ts
index 605d0cb..57e5936 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' | 'retro-arcade'
+export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora'
export interface ThemeOption {
id: ThemeId
@@ -37,6 +37,12 @@ export const THEMES: ThemeOption[] = [
name: 'Retro Arcade',
description: 'Vibrant pink and teal pixel vibes',
previewColors: { primary: '#e8457c', background: '#f0e6d3', accent: '#4eb8a5' }
+ },
+ {
+ id: 'aurora',
+ name: 'Aurora',
+ description: 'Deep violet and teal, like northern lights',
+ previewColors: { primary: '#8b5cf6', background: '#faf8ff', accent: '#2dd4bf' }
}
]
@@ -53,6 +59,8 @@ function getThemeClass(themeId: ThemeId): string {
return 'theme-neo-brutalism'
case 'retro-arcade':
return 'theme-retro-arcade'
+ case 'aurora':
+ return 'theme-aurora'
default:
return ''
}
@@ -62,7 +70,7 @@ export function useTheme() {
const [theme, setThemeState] = useState(() => {
try {
const stored = localStorage.getItem(THEME_STORAGE_KEY)
- if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade') {
+ if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora') {
return stored
}
} catch {
@@ -84,7 +92,7 @@ export function useTheme() {
const root = document.documentElement
// Remove all theme classes
- root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
+ root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
// 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 ef5b3e6..233e01f 100644
--- a/ui/src/styles/globals.css
+++ b/ui/src/styles/globals.css
@@ -473,6 +473,123 @@
--color-status-done: oklch(0.5000 0.1500 355);
}
+/* ============================================================================
+ Theme: Aurora
+ Deep violet and luminous teal inspired by the northern lights
+ Created by Claude - a theme about light emerging from depth
+ ============================================================================ */
+
+.theme-aurora {
+ --radius: 0.5rem;
+ --background: oklch(0.9850 0.0080 285);
+ --foreground: oklch(0.2500 0.0400 285);
+ --card: oklch(0.9700 0.0120 285);
+ --card-foreground: oklch(0.2500 0.0400 285);
+ --popover: oklch(0.9800 0.0100 285);
+ --popover-foreground: oklch(0.2500 0.0400 285);
+ --primary: oklch(0.5500 0.2200 285);
+ --primary-foreground: oklch(1.0000 0 0);
+ --secondary: oklch(0.7000 0.1400 175);
+ --secondary-foreground: oklch(0.1500 0.0300 175);
+ --muted: oklch(0.9400 0.0150 285);
+ --muted-foreground: oklch(0.4500 0.0300 285);
+ --accent: oklch(0.7500 0.1500 170);
+ --accent-foreground: oklch(0.1500 0.0300 170);
+ --destructive: oklch(0.6000 0.2000 25);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --border: oklch(0.8800 0.0200 285);
+ --input: oklch(0.9200 0.0150 285);
+ --ring: oklch(0.5500 0.2200 285);
+ --chart-1: oklch(0.5500 0.2200 285);
+ --chart-2: oklch(0.7000 0.1400 175);
+ --chart-3: oklch(0.6500 0.1800 320);
+ --chart-4: oklch(0.7500 0.1500 170);
+ --chart-5: oklch(0.6000 0.2000 25);
+ --sidebar: oklch(0.9600 0.0150 285);
+ --sidebar-foreground: oklch(0.2500 0.0400 285);
+ --sidebar-primary: oklch(0.5500 0.2200 285);
+ --sidebar-primary-foreground: oklch(1.0000 0 0);
+ --sidebar-accent: oklch(0.7000 0.1400 175);
+ --sidebar-accent-foreground: oklch(0.1500 0.0300 175);
+ --sidebar-border: oklch(0.8800 0.0200 285);
+ --sidebar-ring: oklch(0.5500 0.2200 285);
+
+ /* Shadow variables - soft violet-tinted shadows */
+ --shadow-sm: 0 1px 2px 0 oklch(0.3 0.05 285 / 0.08);
+ --shadow: 0 1px 3px 0 oklch(0.3 0.05 285 / 0.12), 0 1px 2px -1px oklch(0.3 0.05 285 / 0.08);
+ --shadow-md: 0 4px 6px -1px oklch(0.3 0.05 285 / 0.12), 0 2px 4px -2px oklch(0.3 0.05 285 / 0.08);
+ --shadow-lg: 0 10px 15px -3px oklch(0.3 0.05 285 / 0.12), 0 4px 6px -4px oklch(0.3 0.05 285 / 0.08);
+
+ /* Log level colors */
+ --color-log-error: #e879a0;
+ --color-log-warning: #d4a055;
+ --color-log-info: #8b5cf6;
+ --color-log-debug: #7c7c9a;
+ --color-log-success: #2dd4bf;
+
+ /* Status colors for Kanban */
+ --color-status-pending: oklch(0.9400 0.0150 285);
+ --color-status-progress: oklch(0.8500 0.0800 175);
+ --color-status-done: oklch(0.8000 0.1200 285);
+
+ /* Font stacks - Inter for Aurora's clean, readable feel */
+ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+.theme-aurora.dark {
+ --background: oklch(0.1600 0.0300 285);
+ --foreground: oklch(0.9000 0.0150 285);
+ --card: oklch(0.2000 0.0350 285);
+ --card-foreground: oklch(0.9000 0.0150 285);
+ --popover: oklch(0.1800 0.0320 285);
+ --popover-foreground: oklch(0.9000 0.0150 285);
+ --primary: oklch(0.6500 0.2400 285);
+ --primary-foreground: oklch(0.1000 0.0200 285);
+ --secondary: oklch(0.6500 0.1600 175);
+ --secondary-foreground: oklch(0.1000 0.0200 175);
+ --muted: oklch(0.2500 0.0280 285);
+ --muted-foreground: oklch(0.6500 0.0200 285);
+ --accent: oklch(0.6800 0.1700 170);
+ --accent-foreground: oklch(0.1000 0.0200 170);
+ --destructive: oklch(0.6500 0.2000 25);
+ --destructive-foreground: oklch(1.0000 0 0);
+ --border: oklch(0.3200 0.0350 285);
+ --input: oklch(0.2200 0.0300 285);
+ --ring: oklch(0.6500 0.2400 285);
+ --chart-1: oklch(0.6500 0.2400 285);
+ --chart-2: oklch(0.6500 0.1600 175);
+ --chart-3: oklch(0.7000 0.2000 320);
+ --chart-4: oklch(0.6800 0.1700 170);
+ --chart-5: oklch(0.6500 0.2000 25);
+ --sidebar: oklch(0.1400 0.0280 285);
+ --sidebar-foreground: oklch(0.9000 0.0150 285);
+ --sidebar-primary: oklch(0.6500 0.2400 285);
+ --sidebar-primary-foreground: oklch(0.1000 0.0200 285);
+ --sidebar-accent: oklch(0.6500 0.1600 175);
+ --sidebar-accent-foreground: oklch(0.1000 0.0200 175);
+ --sidebar-border: oklch(0.3000 0.0300 285);
+ --sidebar-ring: oklch(0.6500 0.2400 285);
+
+ /* Shadow variables - deep glowing shadows */
+ --shadow-sm: 0 1px 2px 0 oklch(0.1 0.03 285 / 0.4);
+ --shadow: 0 1px 3px 0 oklch(0.1 0.03 285 / 0.5), 0 1px 2px -1px oklch(0.1 0.03 285 / 0.4);
+ --shadow-md: 0 4px 6px -1px oklch(0.1 0.03 285 / 0.5), 0 2px 4px -2px oklch(0.1 0.03 285 / 0.4);
+ --shadow-lg: 0 10px 15px -3px oklch(0.1 0.03 285 / 0.5), 0 4px 6px -4px oklch(0.1 0.03 285 / 0.4);
+
+ /* Log level colors for dark mode - more luminous */
+ --color-log-error: #f472b6;
+ --color-log-warning: #fbbf24;
+ --color-log-info: #a78bfa;
+ --color-log-debug: #a1a1aa;
+ --color-log-success: #5eead4;
+
+ /* Status colors for Kanban - dark mode */
+ --color-status-pending: oklch(0.2500 0.0280 285);
+ --color-status-progress: oklch(0.4000 0.1000 175);
+ --color-status-done: oklch(0.4500 0.1500 285);
+}
+
/* ============================================================================
ShadCN Tailwind v4 Theme Integration
============================================================================ */