From 910ca34eacf6bbcba9c539628ce51af80ee8e3e5 Mon Sep 17 00:00:00 2001 From: Auto Date: Mon, 26 Jan 2026 18:50:02 +0200 Subject: [PATCH] Add Aurora Theme --- ui/index.html | 2 +- ui/src/components/ThemeSelector.tsx | 8 +- ui/src/hooks/useTheme.ts | 14 +++- ui/src/styles/globals.css | 117 ++++++++++++++++++++++++++++ 4 files changed, 135 insertions(+), 6 deletions(-) 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 ============================================================================ */