ros/autocoder
1
0
Fork 0
mirror of https://github.com/leonvanzyl/autocoder.git synced 2026-01-30 06:12:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add Aurora Theme

Browse Source
This commit is contained in:
Auto
2026-01-26 18:50:02 +02:00
parent 9aae6769c9
commit 910ca34eac
4 changed files with 135 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/index.html
View File

@@ -7,7 +7,7 @@
<title>AutoCoder</title> <title>AutoCoder</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <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">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

8
ui/src/components/ThemeSelector.tsx
View File

@@ -32,13 +32,15 @@ export function ThemeSelector({ themes, currentTheme, onThemeChange }: ThemeSele
useEffect(() => { useEffect(() => {
if (previewTheme) { if (previewTheme) {
const root = document.documentElement 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') { if (previewTheme === 'claude') {
root.classList.add('theme-claude') root.classList.add('theme-claude')
} else if (previewTheme === 'neo-brutalism') { } else if (previewTheme === 'neo-brutalism') {
root.classList.add('theme-neo-brutalism') root.classList.add('theme-neo-brutalism')
} else if (previewTheme === 'retro-arcade') { } else if (previewTheme === 'retro-arcade') {
root.classList.add('theme-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 () => { return () => {
if (previewTheme) { if (previewTheme) {
const root = document.documentElement 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') { if (currentTheme === 'claude') {
root.classList.add('theme-claude') root.classList.add('theme-claude')
} else if (currentTheme === 'neo-brutalism') { } else if (currentTheme === 'neo-brutalism') {
root.classList.add('theme-neo-brutalism') root.classList.add('theme-neo-brutalism')
} else if (currentTheme === 'retro-arcade') { } else if (currentTheme === 'retro-arcade') {
root.classList.add('theme-retro-arcade') root.classList.add('theme-retro-arcade')
} else if (currentTheme === 'aurora') {
root.classList.add('theme-aurora')
} }
} }
} }

14
ui/src/hooks/useTheme.ts
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useCallback } from 'react' 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 { export interface ThemeOption {
id: ThemeId id: ThemeId
@@ -37,6 +37,12 @@ export const THEMES: ThemeOption[] = [
name: 'Retro Arcade', name: 'Retro Arcade',
description: 'Vibrant pink and teal pixel vibes', description: 'Vibrant pink and teal pixel vibes',
previewColors: { primary: '#e8457c', background: '#f0e6d3', accent: '#4eb8a5' } 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' return 'theme-neo-brutalism'
case 'retro-arcade': case 'retro-arcade':
return 'theme-retro-arcade' return 'theme-retro-arcade'
case 'aurora':
return 'theme-aurora'
default: default:
return '' return ''
} }
@@ -62,7 +70,7 @@ export function useTheme() {
const [theme, setThemeState] = useState<ThemeId>(() => { const [theme, setThemeState] = useState<ThemeId>(() => {
try { try {
const stored = localStorage.getItem(THEME_STORAGE_KEY) 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 return stored
} }
} catch { } catch {
@@ -84,7 +92,7 @@ export function useTheme() {
const root = document.documentElement const root = document.documentElement
// Remove all theme classes // 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) // Add current theme class (if not twitter/default)
const themeClass = getThemeClass(theme) const themeClass = getThemeClass(theme)

117
ui/src/styles/globals.css
View File

@@ -473,6 +473,123 @@
--color-status-done: oklch(0.5000 0.1500 355); --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 ShadCN Tailwind v4 Theme Integration
============================================================================ */ ============================================================================ */