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)
This commit is contained in:
zenchantlive
parent
958230f2ef
commit
fccb2dede7
2 changed files with 60 additions and 63 deletions
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue