feat(dashboard): Lemonade theme with theme switching#614
Merged
Lightheartdevs merged 12 commits intomainfrom Mar 24, 2026
Merged
feat(dashboard): Lemonade theme with theme switching#614Lightheartdevs merged 12 commits intomainfrom
Lightheartdevs merged 12 commits intomainfrom
Conversation
Adds a complete theme system to the dashboard with two themes: - Dream (default): existing dark theme with indigo accents - Lemonade: warm cream/gold theme matching AMD Lemonade branding Implementation: - CSS custom properties on :root controlled by data-theme attribute - ThemeContext (React context) manages state + localStorage persistence - Tailwind config extended with theme-aware color tokens - Flash prevention script in index.html reads theme before React loads - Sun/Moon toggle in sidebar switches between themes Updated 15 component files to use theme-aware classes. Semantic status colors (red/green/yellow) remain hardcoded — they mean the same thing in both themes. Build verified: vite build passes with zero errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
… Arctic 7 total prebuilt themes users can cycle through via Palette button: - Dream (dark/indigo) — default - Lemonade (warm cream/gold) — AMD branding - Light (clean modern futuristic) - Midnight (deep navy/electric blue) - Forest (dark green/emerald) - Sunset (warm dark/orange coral) - Arctic (cool light/ice blue) Theme toggle changed from Sun/Moon to Palette icon with cycle behavior. Flash prevention script updated to handle all theme names. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Darken text colors and accent for better readability on light background: - text: #2D2A26 → #1A1708 (near-black instead of brown) - text-secondary: #6B6560 → #4A4535 - text-muted: #9C9590 → #7A7260 - accent: #D4A017 → #B8860B (richer gold, better on white) - accent-light: #F5C518 → #D4A017 - border: #E5DDD0 → #D4C9B0 (more visible) - card: #FFFFFF → #FFFDF5 (slight warm tint) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…randing Implements the full design spec from lemonade-server.ai: - Page bg #F6EFD9 (warm parchment), cards #FBF7EA (bright ivory) - Sidebar #EFE4C6 (denser anchor tone) - Text #262626 (deep charcoal), secondary #6B665C, muted #8A8478 - Accent #F5C518 (restrained yellow for CTAs only) - Border #E1D4B0 with subtle card shadows New theme variables: --theme-sidebar, --theme-card-shadow, --theme-card-radius — applied to all 7 themes with appropriate defaults (shadows for light themes, none for dark). Design principles applied: - Background darker than cards, cards lighter than sidebar - Primary text always crisp, yellow means "action" not "everything" - Clear tonal separation between surface levels Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
84 remaining text-zinc-* classes replaced across 11 component files: - text-zinc-100/200/300 → text-theme-text (primary) - text-zinc-400 → text-theme-text-secondary (body/descriptions) - text-zinc-500/600 → text-theme-text-muted (metadata/hints) - bg-zinc-700 → bg-theme-border (progress tracks, disabled states) Also added global card styling rule that applies theme shadow and radius to all rounded-xl elements via CSS variables. Added --theme-dark-contrast: #1E2240 to Lemonade theme for future use in charts, log widgets, and selected states. Preserved: disabled:bg-zinc-700, status dot colors (bg-zinc-500/600 in Dashboard/Settings), code block backgrounds, ErrorBoundary styles. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 instances of text-white changed to text-theme-text for elements on card/page backgrounds (invisible on light themes): - Page titles: Dashboard, Settings, Voice, Models - Section headers: System Status, Services - Feature card titles and descriptions - Metric card values (GPU%, VRAM, temps, model name) - Service card names - SetupWizard step headings - Modal titles and form inputs - Settings info row values Kept text-white on: accent buttons, green buttons, active nav, mic icons on colored bg, chat bubbles on accent bg. Also fixed: sidebar logo uses text-theme-text instead of accent, feature card icons use text-theme-text-secondary instead of accent. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Per design review feedback, focused on component polish not palette: Feature cards: - Border softened from border-2 to border, lighter default - Icon container uses bg-theme-bg for subtle depth - Title bumped to font-bold, description given leading-relaxed - Status pills refined: smaller text, softer bg, font-medium - Tighter icon-to-title spacing (mb-4 → mb-3) Metric cards: - Labels: smaller (text-xs), uppercase tracking, quieter - Values: larger (text-2xl), bolder — dominant element - Subvalue: smaller (text-[11px]) for clear hierarchy - Progress bars: slightly thicker (h-1.5), softer track Service cards: - More vertical padding (py-5) - Status dot smaller (w-1.5) and subtler - Metadata indented and smaller (text-[11px]) - More breathing room between name and port info Sidebar logo: - More padding (pt-5 pb-4) for breathing room - Logo opacity removed — full contrast - Version text upgraded from text-muted to text-secondary - Collapsed logo: font-extrabold Lemonade palette: - Cards brightened (#FBF7EA → #FDFBF2) - Borders softened (#E1D4B0 → #E8DFC8) - Shadow refined (tighter, slightly stronger) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…sence Per 8.5/10 brand review, focused on the four identified gaps: Layer separation: - Page bg darkened (#F6EFD9 → #F0E8CF) for stronger card contrast - Cards stay bright (#FDFBF3) — now clearly elevated above canvas Feature cards: - More padding (p-7), hover adds shadow-md for depth - Title: font-extrabold at 15px — stronger anchor - Description: 13px at 80% opacity — deliberately quieter - Icon padding restored (p-3) for visual weight Stat cards: - Labels: 10px, semibold, widest tracking, 70% opacity — very quiet - Values: 26px, bold, tight leading — dominant element - Progress track: thinner (h-1), 40% opacity — more refined Service tiles: - Title/metadata gap increased (mb-3) - Metadata: 10px at 70% opacity — clearly subordinate - Title: 13px for comfortable reading Sidebar brand: - Header padding increased (pt-6 pb-5) for presence - Collapsed logo: text-xl font-black - Tagline tracking widened, tighter to version line Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…aphy Three targeted tweaks per 9/10 review: 1. Vertical rhythm: - Feature cards → System Status gap: mb-8 → mb-12 - System Status → Services gap: mb-8 → mb-12 - Section header margins: mb-4 → mb-5 2. Sidebar quick links quieted: - Icons: 20px → 16px - Label text: default → 12px - Status badges: "OPEN"/"OFFLINE" → "OPEN"/"—" at 9px, 50% opacity - Row spacing: py-2.5 → py-1.5, space-y-1 → space-y-0 - Section header: smaller, 60% opacity, widest tracking - Border: 60% opacity 3. Stat card typography refined: - Labels: 10px → 9px, 50% opacity, wider tracking - Icons: 14px → 13px, 50% opacity - Values: 26px → 28px, leading-none (dominant focal point) - Subvalues: 11px → 10px, 70% opacity - Progress bars: h-1 → 3px, 30% opacity track Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Reduced to 4 curated themes: Dream, Lemonade, Light, Arctic. Removed CSS blocks and theme registry entries for Midnight, Forest, Sunset. Users on a removed theme fall back to Dream on next load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Changed coming status border from border-theme-border/40 to border-transparent. The card still has opacity-40 to show it's inactive, but no outline competing with the background. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The visible outline on LLM Observability was the card's bg-theme-card surface showing against the darker page. Moved bg into statusColors map so coming cards use bg-theme-bg/50 (nearly invisible) instead of the elevated card surface. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implementation
:rootcontrolled bydata-themeattribute — no Tailwind plugins neededFiles changed
src/contexts/ThemeContext.jsxtailwind.config.js,index.html,src/index.css,src/main.jsxApp.jsx,Sidebar.jsx,SetupWizard.jsx,FeatureDiscovery.jsx,PreFlightChecks.jsx,SuccessValidation.jsx,TroubleshootingAssistant.jsxDashboard.jsx,Models.jsx,Settings.jsx,Voice.jsxTest plan
npm run buildpasses (verified locally)🤖 Generated with Claude Code