From fccb2dede7c34b0f48fb3afe8caf1f65ea37bc79 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Thu, 26 Feb 2026 16:42:23 -0800 Subject: [PATCH] fix(theme): overhaul light mode, remove silly themes Light mode fixes: - Darker surfaces (not pure white) - Proper text colors (dark slate, not white) - More opaque status colors for visibility - Grey backdrop instead of harsh white Removed themes (keeping only 3 good ones): - Midnight (looked silly) - Forest (looked silly) - Dusk (looked silly) Kept themes: - Aurora (northern lights) - Contrast (high contrast neon) - Light (soft grey, now fixed) --- src/components/shared/theme-toggle.tsx | 9 +- src/styles/themes/light.css | 114 ++++++++++++------------- 2 files changed, 60 insertions(+), 63 deletions(-) diff --git a/src/components/shared/theme-toggle.tsx b/src/components/shared/theme-toggle.tsx index 458e40a..b1ab6da 100644 --- a/src/components/shared/theme-toggle.tsx +++ b/src/components/shared/theme-toggle.tsx @@ -5,12 +5,9 @@ import { Palette, Check } from 'lucide-react'; import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; const themes = [ - { id: 'aurora', name: 'Aurora', desc: 'Northern lights (teal & violet)' }, - { id: 'midnight', name: 'Midnight', desc: 'Deep blue-purple' }, - { id: 'forest', name: 'Forest', desc: 'Mossy green & amber' }, - { id: 'dusk', name: 'Dusk', desc: 'Sunset orange & coral' }, - { id: 'contrast', name: 'Contrast', desc: 'Pure black/white' }, - { id: 'light', name: 'Light', desc: 'Clean & professional' }, + { id: 'aurora', name: 'Aurora', desc: 'Northern lights' }, + { id: 'contrast', name: 'Contrast', desc: 'High contrast neon' }, + { id: 'light', name: 'Light', desc: 'Soft grey' }, ] as const; export function ThemeToggle() { diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css index 3075bc5..8d8254a 100644 --- a/src/styles/themes/light.css +++ b/src/styles/themes/light.css @@ -1,111 +1,111 @@ /** - * Light Theme - Clean & Professional + * Light Theme - Softer & Readable * - * A clean, accessible light theme with subtle greys and vibrant accents + * A softer light theme with proper contrast and readable text */ [data-theme="light"] { /* ========================================================================== - 1. SURFACE LAYERS - Clean white/grey scale + 1. SURFACE LAYERS - Softer greys, not pure white ========================================================================== */ - --surface-backdrop: #f8fafc; - --surface-elevated: #ffffff; - --surface-primary: #f1f5f9; - --surface-secondary: #ffffff; - --surface-tertiary: #e2e8f0; - --surface-quaternary: #f8fafc; - --surface-overlay: #ffffff; + --surface-backdrop: #e2e8f0; + --surface-elevated: #f1f5f9; + --surface-primary: #e8edf5; + --surface-secondary: #f8fafc; + --surface-tertiary: #cbd5e1; + --surface-quaternary: #ffffff; + --surface-overlay: #f1f5f9; --surface-input: #ffffff; - --surface-hover: rgba(15, 23, 42, 0.04); - --surface-active: rgba(59, 130, 246, 0.1); + --surface-hover: rgba(15, 23, 42, 0.06); + --surface-active: rgba(59, 130, 246, 0.15); --surface-tooltip: #1e293b; /* ========================================================================== - 2. BORDERS - Subtle greys + 2. BORDERS - Visible grey ========================================================================== */ - --border-subtle: rgba(148, 163, 184, 0.25); - --border-default: rgba(148, 163, 184, 0.4); - --border-strong: rgba(71, 85, 105, 0.5); - --border-accent: rgba(59, 130, 246, 0.6); + --border-subtle: rgba(71, 85, 105, 0.2); + --border-default: rgba(71, 85, 105, 0.35); + --border-strong: rgba(51, 65, 85, 0.5); + --border-accent: rgba(37, 99, 235, 0.6); /* ========================================================================== - 3. TEXT - Slate scale + 3. TEXT - Dark slate (NOT white!) ========================================================================== */ --text-primary: #0f172a; --text-secondary: #334155; --text-tertiary: #64748b; --text-disabled: #94a3b8; - --text-inverse: #ffffff; + --text-inverse: #f8fafc; /* ========================================================================== - 4. ACCENTS - Vibrant on light backgrounds + 4. ACCENTS - Vibrant but not neon ========================================================================== */ - --accent-info: #3b82f6; - --accent-success: #22c55e; - --accent-warning: #f59e0b; - --accent-danger: #ef4444; + --accent-info: #2563eb; + --accent-success: #16a34a; + --accent-warning: #d97706; + --accent-danger: #dc2626; /* ========================================================================== - 5. ACCENT GLOWS - Subtle shadows on light + 5. ACCENT GLOWS - Subtle on light ========================================================================== */ - --glow-info: 0 0 20px rgba(59, 130, 246, 0.25); - --glow-success: 0 0 20px rgba(34, 197, 94, 0.25); - --glow-warning: 0 0 20px rgba(245, 158, 11, 0.25); - --glow-danger: 0 0 20px rgba(239, 68, 68, 0.25); + --glow-info: 0 0 16px rgba(37, 99, 235, 0.2); + --glow-success: 0 0 16px rgba(22, 163, 74, 0.2); + --glow-warning: 0 0 16px rgba(217, 119, 6, 0.2); + --glow-danger: 0 0 16px rgba(220, 38, 38, 0.2); /* ========================================================================== 6. GRAPH COLORS ========================================================================== */ - --graph-node-default: rgba(255, 255, 255, 0.98); - --graph-node-epic: rgba(59, 130, 246, 0.12); - --graph-edge-default: rgba(100, 116, 139, 0.35); - --graph-edge-selected: #3b82f6; - --graph-edge-cycle: #f59e0b; + --graph-node-default: rgba(255, 255, 255, 0.95); + --graph-node-epic: rgba(37, 99, 235, 0.15); + --graph-edge-default: rgba(71, 85, 105, 0.4); + --graph-edge-selected: #2563eb; + --graph-edge-cycle: #d97706; /* ========================================================================== 7. SEMANTIC ALPHAS - Dark overlays for light theme ========================================================================== */ - --alpha-white-low: rgba(255, 255, 255, 0.5); - --alpha-white-medium: rgba(255, 255, 255, 0.7); - --alpha-white-high: rgba(255, 255, 255, 0.9); - --alpha-black-low: rgba(15, 23, 42, 0.04); - --alpha-black-medium: rgba(15, 23, 42, 0.08); - --alpha-black-high: rgba(15, 23, 42, 0.15); + --alpha-white-low: rgba(255, 255, 255, 0.6); + --alpha-white-medium: rgba(255, 255, 255, 0.8); + --alpha-white-high: rgba(255, 255, 255, 0.95); + --alpha-black-low: rgba(15, 23, 42, 0.06); + --alpha-black-medium: rgba(15, 23, 42, 0.12); + --alpha-black-high: rgba(15, 23, 42, 0.2); /* ========================================================================== - 8. STATUS COLORS - Slightly muted for light + 8. STATUS COLORS - More opaque for visibility ========================================================================== */ - --status-ready: rgba(34, 197, 94, 0.12); - --status-in-progress: rgba(245, 158, 11, 0.12); - --status-blocked: rgba(239, 68, 68, 0.12); - --status-closed: rgba(148, 163, 184, 0.1); - --status-deferred: rgba(148, 163, 184, 0.06); + --status-ready: rgba(22, 163, 74, 0.2); + --status-in-progress: rgba(217, 119, 6, 0.2); + --status-blocked: rgba(220, 38, 38, 0.2); + --status-closed: rgba(100, 116, 139, 0.15); + --status-deferred: rgba(100, 116, 139, 0.1); /* ========================================================================== 9. SHADOWS - Softer on light ========================================================================== */ - --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); - --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.1); - --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.12); + --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.1); + --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.12); + --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.15); /* ========================================================================== 10. AGENT ROLE COLORS ========================================================================== */ - --agent-role-ui: #3b82f6; - --agent-role-graph: #22c55e; - --agent-role-orchestrator: #a855f7; - --agent-role-researcher: #f97316; + --agent-role-ui: #2563eb; + --agent-role-graph: #16a34a; + --agent-role-orchestrator: #7c3aed; + --agent-role-researcher: #ea580c; /* ========================================================================== 11. SCROLLBARS ========================================================================== */ - --scrollbar-track: rgba(15, 23, 42, 0.03); - --scrollbar-thumb: rgba(100, 116, 139, 0.25); - --scrollbar-thumb-hover: rgba(71, 85, 105, 0.4); + --scrollbar-track: rgba(15, 23, 42, 0.05); + --scrollbar-thumb: rgba(100, 116, 139, 0.3); + --scrollbar-thumb-hover: rgba(71, 85, 105, 0.45); /* ========================================================================== 12. CODE/SYNTAX ========================================================================== */ - --code-background: #f1f5f9; + --code-background: #e2e8f0; --code-text: #334155; }