Skip to content

Commit 910ca34

Browse files
leonvanzylleonvanzyl
committed
Add Aurora Theme
1 parent 9aae676 commit 910ca34

4 files changed

Lines changed: 135 additions & 6 deletions

File tree

‎ui/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<title>AutoCoder</title>
88
<link rel="preconnect" href="https://fonts.googleapis.com">
99
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10-
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
10+
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=DM+Sans:wght@400;500;700&family=Space+Mono:wght@400;700&family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
1111
</head>
1212
<body>
1313
<div id="root"></div>

‎ui/src/components/ThemeSelector.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,31 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
3232
useEffect(() => {
3333
if (previewTheme) {
3434
const root = document.documentElement
35-
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
35+
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
3636
if (previewTheme === 'claude') {
3737
root.classList.add('theme-claude')
3838
} else if (previewTheme === 'neo-brutalism') {
3939
root.classList.add('theme-neo-brutalism')
4040
} else if (previewTheme === 'retro-arcade') {
4141
root.classList.add('theme-retro-arcade')
42+
} else if (previewTheme === 'aurora') {
43+
root.classList.add('theme-aurora')
4244
}
4345
}
4446

4547
// Cleanup: restore current theme when preview ends
4648
return () => {
4749
if (previewTheme) {
4850
const root = document.documentElement
49-
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
51+
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
5052
if (currentTheme === 'claude') {
5153
root.classList.add('theme-claude')
5254
} else if (currentTheme === 'neo-brutalism') {
5355
root.classList.add('theme-neo-brutalism')
5456
} else if (currentTheme === 'retro-arcade') {
5557
root.classList.add('theme-retro-arcade')
58+
} else if (currentTheme === 'aurora') {
59+
root.classList.add('theme-aurora')
5660
}
5761
}
5862
}

‎ui/src/hooks/useTheme.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect, useCallback } from 'react'
22

3-
export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade'
3+
export type ThemeId = 'twitter' | 'claude' | 'neo-brutalism' | 'retro-arcade' | 'aurora'
44

55
export interface ThemeOption {
66
id: ThemeId
@@ -37,6 +37,12 @@ export const THEMES: ThemeOption[] = [
3737
name: 'Retro Arcade',
3838
description: 'Vibrant pink and teal pixel vibes',
3939
previewColors: { primary: '#e8457c', background: '#f0e6d3', accent: '#4eb8a5' }
40+
},
41+
{
42+
id: 'aurora',
43+
name: 'Aurora',
44+
description: 'Deep violet and teal, like northern lights',
45+
previewColors: { primary: '#8b5cf6', background: '#faf8ff', accent: '#2dd4bf' }
4046
}
4147
]
4248

@@ -53,6 +59,8 @@ function getThemeClass(themeId: ThemeId): string {
5359
return 'theme-neo-brutalism'
5460
case 'retro-arcade':
5561
return 'theme-retro-arcade'
62+
case 'aurora':
63+
return 'theme-aurora'
5664
default:
5765
return ''
5866
}
@@ -62,7 +70,7 @@ export function useTheme() {
6270
const [theme, setThemeState] = useState<ThemeId>(() => {
6371
try {
6472
const stored = localStorage.getItem(THEME_STORAGE_KEY)
65-
if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade') {
73+
if (stored === 'twitter' || stored === 'claude' || stored === 'neo-brutalism' || stored === 'retro-arcade' || stored === 'aurora') {
6674
return stored
6775
}
6876
} catch {
@@ -84,7 +92,7 @@ export function useTheme() {
8492
const root = document.documentElement
8593

8694
// Remove all theme classes
87-
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade')
95+
root.classList.remove('theme-claude', 'theme-neo-brutalism', 'theme-retro-arcade', 'theme-aurora')
8896

8997
// Add current theme class (if not twitter/default)
9098
const themeClass = getThemeClass(theme)

‎ui/src/styles/globals.css‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -473,6 +473,123 @@
473473
--color-status-done: oklch(0.5000 0.1500 355);
474474
}
475475

476+
/* ============================================================================
477+
Theme: Aurora
478+
Deep violet and luminous teal inspired by the northern lights
479+
Created by Claude - a theme about light emerging from depth
480+
============================================================================ */
481+
482+
.theme-aurora {
483+
--radius: 0.5rem;
484+
--background: oklch(0.9850 0.0080 285);
485+
--foreground: oklch(0.2500 0.0400 285);
486+
--card: oklch(0.9700 0.0120 285);
487+
--card-foreground: oklch(0.2500 0.0400 285);
488+
--popover: oklch(0.9800 0.0100 285);
489+
--popover-foreground: oklch(0.2500 0.0400 285);
490+
--primary: oklch(0.5500 0.2200 285);
491+
--primary-foreground: oklch(1.0000 0 0);
492+
--secondary: oklch(0.7000 0.1400 175);
493+
--secondary-foreground: oklch(0.1500 0.0300 175);
494+
--muted: oklch(0.9400 0.0150 285);
495+
--muted-foreground: oklch(0.4500 0.0300 285);
496+
--accent: oklch(0.7500 0.1500 170);
497+
--accent-foreground: oklch(0.1500 0.0300 170);
498+
--destructive: oklch(0.6000 0.2000 25);
499+
--destructive-foreground: oklch(1.0000 0 0);
500+
--border: oklch(0.8800 0.0200 285);
501+
--input: oklch(0.9200 0.0150 285);
502+
--ring: oklch(0.5500 0.2200 285);
503+
--chart-1: oklch(0.5500 0.2200 285);
504+
--chart-2: oklch(0.7000 0.1400 175);
505+
--chart-3: oklch(0.6500 0.1800 320);
506+
--chart-4: oklch(0.7500 0.1500 170);
507+
--chart-5: oklch(0.6000 0.2000 25);
508+
--sidebar: oklch(0.9600 0.0150 285);
509+
--sidebar-foreground: oklch(0.2500 0.0400 285);
510+
--sidebar-primary: oklch(0.5500 0.2200 285);
511+
--sidebar-primary-foreground: oklch(1.0000 0 0);
512+
--sidebar-accent: oklch(0.7000 0.1400 175);
513+
--sidebar-accent-foreground: oklch(0.1500 0.0300 175);
514+
--sidebar-border: oklch(0.8800 0.0200 285);
515+
--sidebar-ring: oklch(0.5500 0.2200 285);
516+
517+
/* Shadow variables - soft violet-tinted shadows */
518+
--shadow-sm: 0 1px 2px 0 oklch(0.3 0.05 285 / 0.08);
519+
--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);
520+
--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);
521+
--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);
522+
523+
/* Log level colors */
524+
--color-log-error: #e879a0;
525+
--color-log-warning: #d4a055;
526+
--color-log-info: #8b5cf6;
527+
--color-log-debug: #7c7c9a;
528+
--color-log-success: #2dd4bf;
529+
530+
/* Status colors for Kanban */
531+
--color-status-pending: oklch(0.9400 0.0150 285);
532+
--color-status-progress: oklch(0.8500 0.0800 175);
533+
--color-status-done: oklch(0.8000 0.1200 285);
534+
535+
/* Font stacks - Inter for Aurora's clean, readable feel */
536+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
537+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
538+
}
539+
540+
.theme-aurora.dark {
541+
--background: oklch(0.1600 0.0300 285);
542+
--foreground: oklch(0.9000 0.0150 285);
543+
--card: oklch(0.2000 0.0350 285);
544+
--card-foreground: oklch(0.9000 0.0150 285);
545+
--popover: oklch(0.1800 0.0320 285);
546+
--popover-foreground: oklch(0.9000 0.0150 285);
547+
--primary: oklch(0.6500 0.2400 285);
548+
--primary-foreground: oklch(0.1000 0.0200 285);
549+
--secondary: oklch(0.6500 0.1600 175);
550+
--secondary-foreground: oklch(0.1000 0.0200 175);
551+
--muted: oklch(0.2500 0.0280 285);
552+
--muted-foreground: oklch(0.6500 0.0200 285);
553+
--accent: oklch(0.6800 0.1700 170);
554+
--accent-foreground: oklch(0.1000 0.0200 170);
555+
--destructive: oklch(0.6500 0.2000 25);
556+
--destructive-foreground: oklch(1.0000 0 0);
557+
--border: oklch(0.3200 0.0350 285);
558+
--input: oklch(0.2200 0.0300 285);
559+
--ring: oklch(0.6500 0.2400 285);
560+
--chart-1: oklch(0.6500 0.2400 285);
561+
--chart-2: oklch(0.6500 0.1600 175);
562+
--chart-3: oklch(0.7000 0.2000 320);
563+
--chart-4: oklch(0.6800 0.1700 170);
564+
--chart-5: oklch(0.6500 0.2000 25);
565+
--sidebar: oklch(0.1400 0.0280 285);
566+
--sidebar-foreground: oklch(0.9000 0.0150 285);
567+
--sidebar-primary: oklch(0.6500 0.2400 285);
568+
--sidebar-primary-foreground: oklch(0.1000 0.0200 285);
569+
--sidebar-accent: oklch(0.6500 0.1600 175);
570+
--sidebar-accent-foreground: oklch(0.1000 0.0200 175);
571+
--sidebar-border: oklch(0.3000 0.0300 285);
572+
--sidebar-ring: oklch(0.6500 0.2400 285);
573+
574+
/* Shadow variables - deep glowing shadows */
575+
--shadow-sm: 0 1px 2px 0 oklch(0.1 0.03 285 / 0.4);
576+
--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);
577+
--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);
578+
--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);
579+
580+
/* Log level colors for dark mode - more luminous */
581+
--color-log-error: #f472b6;
582+
--color-log-warning: #fbbf24;
583+
--color-log-info: #a78bfa;
584+
--color-log-debug: #a1a1aa;
585+
--color-log-success: #5eead4;
586+
587+
/* Status colors for Kanban - dark mode */
588+
--color-status-pending: oklch(0.2500 0.0280 285);
589+
--color-status-progress: oklch(0.4000 0.1000 175);
590+
--color-status-done: oklch(0.4500 0.1500 285);
591+
}
592+
476593
/* ============================================================================
477594
ShadCN Tailwind v4 Theme Integration
478595
============================================================================ */

0 commit comments

Comments
 (0)