feat(theme): complete theme overhaul with 6 polished themes
- Aurora: Real northern lights colors (teal/violet on deep blue-black) - Midnight: Deep ocean blues with violet and cyan - Forest: Rich forest greens with golden sunlight - Dusk: Warm sunset oranges and corals - Contrast: Pure black with neon accents - Light: Clean professional light mode (NEW) All themes have: - Consistent status colors (green/amber/red) - Distinct surface layers for visual hierarchy - Theme-appropriate accent glows - Improved contrast and accessibility
This commit is contained in:
zenchantlive
parent
8a1dc2039a
commit
958230f2ef
8 changed files with 365 additions and 253 deletions
|
|
@ -5,11 +5,12 @@ import { Palette, Check } from 'lucide-react';
|
|||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
|
||||
const themes = [
|
||||
{ id: 'aurora', name: 'Aurora', desc: 'Warm charcoal + cyan' },
|
||||
{ id: 'midnight', name: 'Midnight', desc: 'Cool blue-purple' },
|
||||
{ id: 'forest', name: 'Forest', desc: 'Earthy green-brown' },
|
||||
{ id: 'dusk', name: 'Dusk', desc: 'Sunset orange-pink' },
|
||||
{ id: 'contrast', name: 'Contrast', desc: 'High contrast' },
|
||||
{ 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' },
|
||||
] as const;
|
||||
|
||||
export function ThemeToggle() {
|
||||
|
|
|
|||
|
|
@ -1,78 +1,78 @@
|
|||
/**
|
||||
* Aurora Theme - Warm Charcoal with Cyan Accents
|
||||
* Aurora Theme - Northern Lights
|
||||
*
|
||||
* A dark theme with warm brown-grey charcoal backgrounds
|
||||
* and bright cyan/teal accent colors for the "aurora" glow effect.
|
||||
* Fixed: Better contrast, warmer tones, more distinct layers
|
||||
* Inspired by the actual aurora borealis:
|
||||
* Deep night sky with flowing ribbons of teal, green, and violet
|
||||
*/
|
||||
|
||||
[data-theme="aurora"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Warm Charcoal Scale (MORE DISTINCT)
|
||||
1. SURFACE LAYERS - Night Sky with subtle aurora tint
|
||||
========================================================================== */
|
||||
--surface-backdrop: #0f0e0d; /* Page background - very dark */
|
||||
--surface-elevated: #1a1816; /* Header - lighter than backdrop */
|
||||
--surface-primary: #252320; /* Sidebar - lighter still */
|
||||
--surface-secondary: #302e2a; /* Main content - distinct from sidebar */
|
||||
--surface-tertiary: #3c3934; /* Panels - clearly lighter */
|
||||
--surface-quaternary: #48453f; /* Cards - lightest surface */
|
||||
--surface-overlay: #0a0908; /* Modals - darkest */
|
||||
--surface-input: #1f1d1a; /* Form fields */
|
||||
--surface-hover: rgba(240, 238, 234, 0.06);
|
||||
--surface-active: rgba(53, 201, 255, 0.12);
|
||||
--surface-tooltip: #1e1d1b;
|
||||
--surface-backdrop: #0a0f14;
|
||||
--surface-elevated: #0d1218;
|
||||
--surface-primary: #111820;
|
||||
--surface-secondary: #162028;
|
||||
--surface-tertiary: #1c2a35;
|
||||
--surface-quaternary: #233543;
|
||||
--surface-overlay: #070a0e;
|
||||
--surface-input: #131d26;
|
||||
--surface-hover: rgba(100, 255, 218, 0.06);
|
||||
--surface-active: rgba(139, 92, 246, 0.12);
|
||||
--surface-tooltip: #111820;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - More Visible
|
||||
2. BORDERS - Soft aurora glow
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(200, 195, 185, 0.18);
|
||||
--border-default: rgba(200, 195, 185, 0.35);
|
||||
--border-strong: rgba(200, 195, 185, 0.55);
|
||||
--border-accent: rgba(53, 201, 255, 0.55);
|
||||
--border-subtle: rgba(100, 255, 218, 0.12);
|
||||
--border-default: rgba(100, 255, 218, 0.22);
|
||||
--border-strong: rgba(100, 255, 218, 0.38);
|
||||
--border-accent: rgba(139, 92, 246, 0.55);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm White Scale
|
||||
3. TEXT - Starlight white
|
||||
========================================================================== */
|
||||
--text-primary: #f5f3ef;
|
||||
--text-secondary: #d4d0c7;
|
||||
--text-tertiary: #a8a49a;
|
||||
--text-disabled: #6b6862;
|
||||
--text-inverse: #0f0e0d;
|
||||
--text-primary: #e6f7ff;
|
||||
--text-secondary: #a8c5d9;
|
||||
--text-tertiary: #6b8fa8;
|
||||
--text-disabled: #4a6170;
|
||||
--text-inverse: #0a0f14;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Aurora Colors
|
||||
Teal (info), Green (success), Gold (warning), Rose (danger), Violet (epic)
|
||||
========================================================================== */
|
||||
--accent-info: #4dd4ff;
|
||||
--accent-info: #64ffda;
|
||||
--accent-success: #4ade80;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-danger: #fb7185;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
5. ACCENT GLOWS - Soft aurora glow effects
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 20px rgba(77, 212, 255, 0.3);
|
||||
--glow-success: 0 0 20px rgba(74, 222, 128, 0.3);
|
||||
--glow-warning: 0 0 20px rgba(251, 191, 36, 0.3);
|
||||
--glow-danger: 0 0 20px rgba(251, 113, 133, 0.3);
|
||||
--glow-info: 0 0 24px rgba(100, 255, 218, 0.4);
|
||||
--glow-success: 0 0 24px rgba(74, 222, 128, 0.35);
|
||||
--glow-warning: 0 0 24px rgba(251, 191, 36, 0.35);
|
||||
--glow-danger: 0 0 24px rgba(251, 113, 133, 0.35);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(53, 51, 49, 0.95);
|
||||
--graph-node-epic: rgba(77, 212, 255, 0.15);
|
||||
--graph-edge-default: rgba(180, 175, 165, 0.3);
|
||||
--graph-edge-selected: #4dd4ff;
|
||||
--graph-node-default: rgba(35, 53, 67, 0.95);
|
||||
--graph-node-epic: rgba(139, 92, 246, 0.2);
|
||||
--graph-edge-default: rgba(100, 255, 218, 0.25);
|
||||
--graph-edge-selected: #64ffda;
|
||||
--graph-edge-cycle: #fbbf24;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(245, 243, 239, 0.06);
|
||||
--alpha-white-medium: rgba(245, 243, 239, 0.12);
|
||||
--alpha-white-high: rgba(245, 243, 239, 0.24);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.2);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.45);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.75);
|
||||
--alpha-white-low: rgba(230, 247, 255, 0.05);
|
||||
--alpha-white-medium: rgba(230, 247, 255, 0.11);
|
||||
--alpha-white-high: rgba(230, 247, 255, 0.22);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.25);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.5);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
|
|
@ -80,34 +80,34 @@
|
|||
--status-ready: rgba(74, 222, 128, 0.18);
|
||||
--status-in-progress: rgba(251, 191, 36, 0.18);
|
||||
--status-blocked: rgba(251, 113, 133, 0.18);
|
||||
--status-closed: rgba(168, 164, 154, 0.12);
|
||||
--status-deferred: rgba(168, 164, 154, 0.08);
|
||||
--status-closed: rgba(107, 143, 168, 0.12);
|
||||
--status-deferred: rgba(107, 143, 168, 0.08);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
========================================================================== */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.45);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #7bb3f0;
|
||||
--agent-role-graph: #8fd18f;
|
||||
--agent-role-orchestrator: #c4a5e6;
|
||||
--agent-role-researcher: #e6b88a;
|
||||
--agent-role-ui: #7dd3fc;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-orchestrator: #d8b4fe;
|
||||
--agent-role-researcher: #fdba74;
|
||||
|
||||
/* ==========================================================================
|
||||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(245, 243, 239, 0.03);
|
||||
--scrollbar-thumb: rgba(180, 175, 165, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(180, 175, 165, 0.38);
|
||||
--scrollbar-track: rgba(230, 247, 255, 0.03);
|
||||
--scrollbar-thumb: rgba(100, 255, 218, 0.2);
|
||||
--scrollbar-thumb-hover: rgba(100, 255, 218, 0.35);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #1a1917;
|
||||
--code-text: #d4d0c7;
|
||||
--code-background: #131d26;
|
||||
--code-text: #a8c5d9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,74 +1,74 @@
|
|||
/**
|
||||
* High Contrast Theme - Maximum Visibility
|
||||
* Contrast Theme - Maximum Accessibility
|
||||
*
|
||||
* Pure black background with bright white text and vivid accent colors.
|
||||
* Designed for maximum readability and accessibility.
|
||||
* Pure black background with high-contrast white text
|
||||
* and neon accents for maximum visibility
|
||||
*/
|
||||
|
||||
[data-theme="contrast"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Pure Black & Dark Greys
|
||||
1. SURFACE LAYERS - Pure black scale
|
||||
========================================================================== */
|
||||
--surface-backdrop: #000000;
|
||||
--surface-elevated: #0a0a0a;
|
||||
--surface-primary: #141414;
|
||||
--surface-secondary: #1a1a1a;
|
||||
--surface-tertiary: #242424;
|
||||
--surface-quaternary: #2e2e2e;
|
||||
--surface-overlay: #050505;
|
||||
--surface-input: #111111;
|
||||
--surface-hover: rgba(255, 255, 255, 0.1);
|
||||
--surface-active: rgba(255, 255, 255, 0.15);
|
||||
--surface-quaternary: #333333;
|
||||
--surface-overlay: #000000;
|
||||
--surface-input: #0f0f0f;
|
||||
--surface-hover: rgba(255, 255, 255, 0.12);
|
||||
--surface-active: rgba(255, 255, 255, 0.18);
|
||||
--surface-tooltip: #1a1a1a;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - White (High Contrast)
|
||||
2. BORDERS - High visibility white
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(255, 255, 255, 0.2);
|
||||
--border-default: rgba(255, 255, 255, 0.35);
|
||||
--border-strong: rgba(255, 255, 255, 0.55);
|
||||
--border-accent: rgba(255, 255, 255, 0.7);
|
||||
--border-subtle: rgba(255, 255, 255, 0.25);
|
||||
--border-default: rgba(255, 255, 255, 0.45);
|
||||
--border-strong: rgba(255, 255, 255, 0.7);
|
||||
--border-accent: rgba(255, 255, 255, 0.85);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Pure White
|
||||
3. TEXT - Pure white
|
||||
========================================================================== */
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #e0e0e0;
|
||||
--text-tertiary: #a0a0a0;
|
||||
--text-disabled: #606060;
|
||||
--text-secondary: #e6e6e6;
|
||||
--text-tertiary: #b3b3b3;
|
||||
--text-disabled: #666666;
|
||||
--text-inverse: #000000;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Bright & Vivid
|
||||
4. ACCENTS - Neon bright
|
||||
========================================================================== */
|
||||
--accent-info: #00ffff;
|
||||
--accent-success: #00ff66;
|
||||
--accent-warning: #ffcc00;
|
||||
--accent-warning: #ffff00;
|
||||
--accent-danger: #ff3366;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
5. ACCENT GLOWS - Intense neon
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 24px rgba(0, 255, 255, 0.5);
|
||||
--glow-success: 0 0 24px rgba(0, 255, 102, 0.5);
|
||||
--glow-warning: 0 0 24px rgba(255, 204, 0, 0.5);
|
||||
--glow-danger: 0 0 24px rgba(255, 51, 102, 0.5);
|
||||
--glow-info: 0 0 30px rgba(0, 255, 255, 0.6);
|
||||
--glow-success: 0 0 30px rgba(0, 255, 102, 0.55);
|
||||
--glow-warning: 0 0 30px rgba(255, 255, 0, 0.55);
|
||||
--glow-danger: 0 0 30px rgba(255, 51, 102, 0.55);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(46, 46, 46, 0.98);
|
||||
--graph-node-epic: rgba(0, 255, 255, 0.2);
|
||||
--graph-edge-default: rgba(255, 255, 255, 0.35);
|
||||
--graph-node-default: rgba(51, 51, 51, 0.98);
|
||||
--graph-node-epic: rgba(0, 255, 255, 0.25);
|
||||
--graph-edge-default: rgba(255, 255, 255, 0.4);
|
||||
--graph-edge-selected: #00ffff;
|
||||
--graph-edge-cycle: #ffcc00;
|
||||
--graph-edge-cycle: #ffff00;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(255, 255, 255, 0.08);
|
||||
--alpha-white-medium: rgba(255, 255, 255, 0.16);
|
||||
--alpha-white-high: rgba(255, 255, 255, 0.3);
|
||||
--alpha-white-low: rgba(255, 255, 255, 0.1);
|
||||
--alpha-white-medium: rgba(255, 255, 255, 0.2);
|
||||
--alpha-white-high: rgba(255, 255, 255, 0.35);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.3);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.5);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.8);
|
||||
|
|
@ -76,11 +76,11 @@
|
|||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--status-ready: rgba(0, 255, 102, 0.22);
|
||||
--status-in-progress: rgba(255, 204, 0, 0.22);
|
||||
--status-blocked: rgba(255, 51, 102, 0.22);
|
||||
--status-closed: rgba(160, 160, 160, 0.15);
|
||||
--status-deferred: rgba(160, 160, 160, 0.1);
|
||||
--status-ready: rgba(0, 255, 102, 0.25);
|
||||
--status-in-progress: rgba(255, 255, 0, 0.25);
|
||||
--status-blocked: rgba(255, 51, 102, 0.25);
|
||||
--status-closed: rgba(179, 179, 179, 0.15);
|
||||
--status-deferred: rgba(179, 179, 179, 0.1);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
|
|
@ -101,12 +101,12 @@
|
|||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(255, 255, 255, 0.05);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.25);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
|
||||
--scrollbar-thumb: rgba(255, 255, 255, 0.3);
|
||||
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #111111;
|
||||
--code-text: #e0e0e0;
|
||||
--code-background: #0f0f0f;
|
||||
--code-text: #e6e6e6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +1,45 @@
|
|||
/**
|
||||
* Dusk Theme - Sunset Orange & Pink
|
||||
* Dusk Theme - Golden Hour
|
||||
*
|
||||
* Warm oranges, coral pinks, and soft purples.
|
||||
* Inspired by sunset skies and twilight hues.
|
||||
* Warm sunset oranges, corals, and soft pinks
|
||||
* Like the sky during a beautiful sunset
|
||||
*/
|
||||
|
||||
[data-theme="dusk"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Warm Purple-Brown
|
||||
1. SURFACE LAYERS - Sunset gradient base
|
||||
========================================================================== */
|
||||
--surface-backdrop: #1a1518;
|
||||
--surface-elevated: #110d0f;
|
||||
--surface-primary: #241e21;
|
||||
--surface-secondary: #2d262a;
|
||||
--surface-tertiary: #362e33;
|
||||
--surface-quaternary: #40363c;
|
||||
--surface-overlay: #0c090b;
|
||||
--surface-input: #201a1d;
|
||||
--surface-hover: rgba(255, 230, 240, 0.06);
|
||||
--surface-backdrop: #1c1917;
|
||||
--surface-elevated: #292524;
|
||||
--surface-primary: #451a03;
|
||||
--surface-secondary: #312e2c;
|
||||
--surface-tertiary: #573026;
|
||||
--surface-quaternary: #78350f;
|
||||
--surface-overlay: #0c0a09;
|
||||
--surface-input: #451a03;
|
||||
--surface-hover: rgba(251, 191, 36, 0.06);
|
||||
--surface-active: rgba(251, 146, 60, 0.12);
|
||||
--surface-tooltip: #241e21;
|
||||
--surface-tooltip: #451a03;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Warm Dusty Rose
|
||||
2. BORDERS - Warm amber glow
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(180, 160, 165, 0.15);
|
||||
--border-default: rgba(180, 160, 165, 0.28);
|
||||
--border-strong: rgba(180, 160, 165, 0.45);
|
||||
--border-accent: rgba(251, 146, 60, 0.55);
|
||||
--border-subtle: rgba(251, 191, 36, 0.18);
|
||||
--border-default: rgba(251, 191, 36, 0.32);
|
||||
--border-strong: rgba(251, 191, 36, 0.5);
|
||||
--border-accent: rgba(251, 146, 60, 0.6);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm Off-White
|
||||
3. TEXT - Sunset glow
|
||||
========================================================================== */
|
||||
--text-primary: #faf0f2;
|
||||
--text-secondary: #e2d0d5;
|
||||
--text-tertiary: #b8a0a8;
|
||||
--text-disabled: #786068;
|
||||
--text-inverse: #110d0f;
|
||||
--text-primary: #fff7ed;
|
||||
--text-secondary: #fdba74;
|
||||
--text-tertiary: #fb923c;
|
||||
--text-disabled: #78350f;
|
||||
--text-inverse: #1c1917;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Sunset Oranges & Pinks
|
||||
4. ACCENTS - Sunset colors
|
||||
========================================================================== */
|
||||
--accent-info: #fb923c;
|
||||
--accent-success: #4ade80;
|
||||
|
|
@ -49,29 +49,29 @@
|
|||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 20px rgba(251, 146, 60, 0.35);
|
||||
--glow-success: 0 0 20px rgba(74, 222, 128, 0.3);
|
||||
--glow-warning: 0 0 20px rgba(250, 204, 21, 0.3);
|
||||
--glow-danger: 0 0 20px rgba(248, 113, 113, 0.3);
|
||||
--glow-info: 0 0 24px rgba(251, 146, 60, 0.4);
|
||||
--glow-success: 0 0 24px rgba(74, 222, 128, 0.35);
|
||||
--glow-warning: 0 0 24px rgba(250, 204, 21, 0.4);
|
||||
--glow-danger: 0 0 24px rgba(248, 113, 113, 0.35);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(64, 54, 60, 0.95);
|
||||
--graph-node-epic: rgba(251, 146, 60, 0.18);
|
||||
--graph-edge-default: rgba(180, 160, 165, 0.3);
|
||||
--graph-node-default: rgba(120, 53, 15, 0.95);
|
||||
--graph-node-epic: rgba(251, 146, 60, 0.2);
|
||||
--graph-edge-default: rgba(251, 191, 36, 0.3);
|
||||
--graph-edge-selected: #fb923c;
|
||||
--graph-edge-cycle: #facc15;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(250, 240, 242, 0.05);
|
||||
--alpha-white-medium: rgba(250, 240, 242, 0.11);
|
||||
--alpha-white-high: rgba(250, 240, 242, 0.22);
|
||||
--alpha-white-low: rgba(255, 247, 237, 0.05);
|
||||
--alpha-white-medium: rgba(255, 247, 237, 0.1);
|
||||
--alpha-white-high: rgba(255, 247, 237, 0.2);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.2);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.45);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.75);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.4);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
|
|
@ -79,8 +79,8 @@
|
|||
--status-ready: rgba(74, 222, 128, 0.18);
|
||||
--status-in-progress: rgba(250, 204, 21, 0.18);
|
||||
--status-blocked: rgba(248, 113, 113, 0.18);
|
||||
--status-closed: rgba(184, 160, 168, 0.12);
|
||||
--status-deferred: rgba(184, 160, 168, 0.08);
|
||||
--status-closed: rgba(253, 186, 116, 0.12);
|
||||
--status-deferred: rgba(253, 186, 116, 0.08);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
|
|
@ -100,13 +100,13 @@
|
|||
/* ==========================================================================
|
||||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(250, 240, 242, 0.03);
|
||||
--scrollbar-thumb: rgba(180, 160, 165, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(180, 160, 165, 0.38);
|
||||
--scrollbar-track: rgba(255, 247, 237, 0.03);
|
||||
--scrollbar-thumb: rgba(251, 191, 36, 0.25);
|
||||
--scrollbar-thumb-hover: rgba(251, 191, 36, 0.4);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #201a1d;
|
||||
--code-text: #e2d0d5;
|
||||
--code-background: #451a03;
|
||||
--code-text: #fdba74;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,85 @@
|
|||
/**
|
||||
* Forest Theme - Mossy Green-Brown
|
||||
* Forest Theme - Deep Woods
|
||||
*
|
||||
* Organic, earthy greens with amber gold accents.
|
||||
* Inspired by forest floors and mossy rocks.
|
||||
* Rich forest greens with earthy browns and golden sunlight
|
||||
*/
|
||||
|
||||
[data-theme="forest"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Earthy Moss-Green
|
||||
1. SURFACE LAYERS - Forest floor to canopy
|
||||
========================================================================== */
|
||||
--surface-backdrop: #121510;
|
||||
--surface-elevated: #0a0d08;
|
||||
--surface-primary: #1a1f15;
|
||||
--surface-secondary: #22281a;
|
||||
--surface-tertiary: #2b3320;
|
||||
--surface-quaternary: #353d28;
|
||||
--surface-overlay: #060804;
|
||||
--surface-input: #181c13;
|
||||
--surface-hover: rgba(220, 235, 200, 0.06);
|
||||
--surface-active: rgba(132, 204, 22, 0.12);
|
||||
--surface-tooltip: #1a1f15;
|
||||
--surface-backdrop: #052e16;
|
||||
--surface-elevated: #064e3b;
|
||||
--surface-primary: #065f46;
|
||||
--surface-secondary: #0f3d2e;
|
||||
--surface-tertiary: #14532d;
|
||||
--surface-quaternary: #166534;
|
||||
--surface-overlay: #022c22;
|
||||
--surface-input: #064e3b;
|
||||
--surface-hover: rgba(250, 204, 21, 0.06);
|
||||
--surface-active: rgba(74, 222, 128, 0.12);
|
||||
--surface-tooltip: #064e3b;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Mossy Grey-Green
|
||||
2. BORDERS - Earthy with moss tint
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(150, 165, 130, 0.15);
|
||||
--border-default: rgba(150, 165, 130, 0.28);
|
||||
--border-strong: rgba(150, 165, 130, 0.45);
|
||||
--border-accent: rgba(132, 204, 22, 0.55);
|
||||
--border-subtle: rgba(101, 163, 13, 0.2);
|
||||
--border-default: rgba(101, 163, 13, 0.35);
|
||||
--border-strong: rgba(101, 163, 13, 0.55);
|
||||
--border-accent: rgba(250, 204, 21, 0.6);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Warm Moss
|
||||
3. TEXT - Sunlight through leaves
|
||||
========================================================================== */
|
||||
--text-primary: #f2f5ed;
|
||||
--text-secondary: #c8d4b5;
|
||||
--text-tertiary: #96a582;
|
||||
--text-disabled: #5e6b50;
|
||||
--text-inverse: #0a0d08;
|
||||
--text-primary: #ecfccb;
|
||||
--text-secondary: #bef264;
|
||||
--text-tertiary: #84cc16;
|
||||
--text-disabled: #3f6212;
|
||||
--text-inverse: #052e16;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Forest Greens & Amber Gold
|
||||
4. ACCENTS - Forest life
|
||||
========================================================================== */
|
||||
--accent-info: #a3e635;
|
||||
--accent-success: #4ade80;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-warning: #facc15;
|
||||
--accent-danger: #f87171;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 20px rgba(163, 230, 53, 0.35);
|
||||
--glow-success: 0 0 20px rgba(74, 222, 128, 0.3);
|
||||
--glow-warning: 0 0 20px rgba(251, 191, 36, 0.3);
|
||||
--glow-danger: 0 0 20px rgba(248, 113, 113, 0.3);
|
||||
--glow-info: 0 0 24px rgba(163, 230, 53, 0.4);
|
||||
--glow-success: 0 0 24px rgba(74, 222, 128, 0.35);
|
||||
--glow-warning: 0 0 24px rgba(250, 204, 21, 0.4);
|
||||
--glow-danger: 0 0 24px rgba(248, 113, 113, 0.35);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(53, 61, 40, 0.95);
|
||||
--graph-node-epic: rgba(163, 230, 53, 0.15);
|
||||
--graph-edge-default: rgba(150, 165, 130, 0.3);
|
||||
--graph-node-default: rgba(22, 101, 52, 0.95);
|
||||
--graph-node-epic: rgba(163, 230, 53, 0.2);
|
||||
--graph-edge-default: rgba(132, 204, 22, 0.3);
|
||||
--graph-edge-selected: #a3e635;
|
||||
--graph-edge-cycle: #fbbf24;
|
||||
--graph-edge-cycle: #facc15;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(242, 245, 237, 0.05);
|
||||
--alpha-white-medium: rgba(242, 245, 237, 0.11);
|
||||
--alpha-white-high: rgba(242, 245, 237, 0.22);
|
||||
--alpha-white-low: rgba(236, 252, 203, 0.05);
|
||||
--alpha-white-medium: rgba(236, 252, 203, 0.1);
|
||||
--alpha-white-high: rgba(236, 252, 203, 0.2);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.2);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.45);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.75);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.4);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS
|
||||
========================================================================== */
|
||||
--status-ready: rgba(74, 222, 128, 0.18);
|
||||
--status-in-progress: rgba(251, 191, 36, 0.18);
|
||||
--status-in-progress: rgba(250, 204, 21, 0.18);
|
||||
--status-blocked: rgba(248, 113, 113, 0.18);
|
||||
--status-closed: rgba(150, 165, 130, 0.12);
|
||||
--status-deferred: rgba(150, 165, 130, 0.08);
|
||||
--status-closed: rgba(132, 204, 22, 0.12);
|
||||
--status-deferred: rgba(132, 204, 22, 0.08);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
|
|
@ -92,21 +91,21 @@
|
|||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #93c5fd;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-ui: #86efac;
|
||||
--agent-role-graph: #4ade80;
|
||||
--agent-role-orchestrator: #d8b4fe;
|
||||
--agent-role-researcher: #fdba74;
|
||||
|
||||
/* ==========================================================================
|
||||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(242, 245, 237, 0.03);
|
||||
--scrollbar-thumb: rgba(150, 165, 130, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(150, 165, 130, 0.38);
|
||||
--scrollbar-track: rgba(236, 252, 203, 0.03);
|
||||
--scrollbar-thumb: rgba(132, 204, 22, 0.25);
|
||||
--scrollbar-thumb-hover: rgba(132, 204, 22, 0.4);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #181c13;
|
||||
--code-text: #c8d4b5;
|
||||
--code-background: #064e3b;
|
||||
--code-text: #bef264;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
@import './forest.css';
|
||||
@import './dusk.css';
|
||||
@import './contrast.css';
|
||||
@import './light.css';
|
||||
|
||||
/* Default theme fallback */
|
||||
html:not([data-theme]) {
|
||||
|
|
|
|||
111
src/styles/themes/light.css
Normal file
111
src/styles/themes/light.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/**
|
||||
* Light Theme - Clean & Professional
|
||||
*
|
||||
* A clean, accessible light theme with subtle greys and vibrant accents
|
||||
*/
|
||||
|
||||
[data-theme="light"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Clean white/grey scale
|
||||
========================================================================== */
|
||||
--surface-backdrop: #f8fafc;
|
||||
--surface-elevated: #ffffff;
|
||||
--surface-primary: #f1f5f9;
|
||||
--surface-secondary: #ffffff;
|
||||
--surface-tertiary: #e2e8f0;
|
||||
--surface-quaternary: #f8fafc;
|
||||
--surface-overlay: #ffffff;
|
||||
--surface-input: #ffffff;
|
||||
--surface-hover: rgba(15, 23, 42, 0.04);
|
||||
--surface-active: rgba(59, 130, 246, 0.1);
|
||||
--surface-tooltip: #1e293b;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Subtle greys
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Slate scale
|
||||
========================================================================== */
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #334155;
|
||||
--text-tertiary: #64748b;
|
||||
--text-disabled: #94a3b8;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Vibrant on light backgrounds
|
||||
========================================================================== */
|
||||
--accent-info: #3b82f6;
|
||||
--accent-success: #22c55e;
|
||||
--accent-warning: #f59e0b;
|
||||
--accent-danger: #ef4444;
|
||||
|
||||
/* ==========================================================================
|
||||
5. ACCENT GLOWS - Subtle shadows 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);
|
||||
|
||||
/* ==========================================================================
|
||||
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;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
8. STATUS COLORS - Slightly muted for light
|
||||
========================================================================== */
|
||||
--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);
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #3b82f6;
|
||||
--agent-role-graph: #22c55e;
|
||||
--agent-role-orchestrator: #a855f7;
|
||||
--agent-role-researcher: #f97316;
|
||||
|
||||
/* ==========================================================================
|
||||
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);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #f1f5f9;
|
||||
--code-text: #334155;
|
||||
}
|
||||
|
|
@ -1,47 +1,47 @@
|
|||
/**
|
||||
* Midnight Theme - Deep Blue-Purple
|
||||
* Midnight Theme - Deep Ocean
|
||||
*
|
||||
* Cool, mysterious deep blue with purple and violet accents.
|
||||
* For those who prefer cool tones over warm charcoal.
|
||||
* Deep navy blues with violet and cyan accents
|
||||
* Like looking into deep ocean water at night
|
||||
*/
|
||||
|
||||
[data-theme="midnight"] {
|
||||
/* ==========================================================================
|
||||
1. SURFACE LAYERS - Deep Blue-Purple
|
||||
1. SURFACE LAYERS - Deep ocean blues
|
||||
========================================================================== */
|
||||
--surface-backdrop: #0a0a12;
|
||||
--surface-elevated: #050510;
|
||||
--surface-primary: #12121f;
|
||||
--surface-secondary: #18182b;
|
||||
--surface-tertiary: #202038;
|
||||
--surface-quaternary: #2a2a45;
|
||||
--surface-overlay: #03030a;
|
||||
--surface-input: #151525;
|
||||
--surface-hover: rgba(199, 195, 255, 0.06);
|
||||
--surface-active: rgba(139, 92, 246, 0.15);
|
||||
--surface-tooltip: #12121f;
|
||||
--surface-backdrop: #020617;
|
||||
--surface-elevated: #0f172a;
|
||||
--surface-primary: #1e1b4b;
|
||||
--surface-secondary: #1e293b;
|
||||
--surface-tertiary: #312e81;
|
||||
--surface-quaternary: #3730a3;
|
||||
--surface-overlay: #020617;
|
||||
--surface-input: #1e1b4b;
|
||||
--surface-hover: rgba(139, 92, 246, 0.08);
|
||||
--surface-active: rgba(6, 182, 212, 0.12);
|
||||
--surface-tooltip: #1e1b4b;
|
||||
|
||||
/* ==========================================================================
|
||||
2. BORDERS - Cool Grey-Blue
|
||||
2. BORDERS - Ocean blue tint
|
||||
========================================================================== */
|
||||
--border-subtle: rgba(150, 155, 180, 0.15);
|
||||
--border-default: rgba(150, 155, 180, 0.28);
|
||||
--border-strong: rgba(150, 155, 180, 0.45);
|
||||
--border-accent: rgba(139, 92, 246, 0.55);
|
||||
--border-subtle: rgba(99, 102, 241, 0.2);
|
||||
--border-default: rgba(99, 102, 241, 0.35);
|
||||
--border-strong: rgba(99, 102, 241, 0.55);
|
||||
--border-accent: rgba(139, 92, 246, 0.65);
|
||||
|
||||
/* ==========================================================================
|
||||
3. TEXT - Cool White
|
||||
3. TEXT - Cool white with blue tint
|
||||
========================================================================== */
|
||||
--text-primary: #f0f0f8;
|
||||
--text-secondary: #c5c5d8;
|
||||
--text-tertiary: #9090a8;
|
||||
--text-disabled: #5a5a70;
|
||||
--text-inverse: #050510;
|
||||
--text-primary: #f0f9ff;
|
||||
--text-secondary: #bfdbfe;
|
||||
--text-tertiary: #7dd3fc;
|
||||
--text-disabled: #52525b;
|
||||
--text-inverse: #020617;
|
||||
|
||||
/* ==========================================================================
|
||||
4. ACCENTS - Violet/Purple/Cyan
|
||||
4. ACCENTS - Ocean bioluminescence
|
||||
========================================================================== */
|
||||
--accent-info: #a78bfa;
|
||||
--accent-info: #22d3ee;
|
||||
--accent-success: #34d399;
|
||||
--accent-warning: #fbbf24;
|
||||
--accent-danger: #f87171;
|
||||
|
|
@ -49,27 +49,27 @@
|
|||
/* ==========================================================================
|
||||
5. ACCENT GLOWS
|
||||
========================================================================== */
|
||||
--glow-info: 0 0 20px rgba(167, 139, 250, 0.35);
|
||||
--glow-success: 0 0 20px rgba(52, 211, 153, 0.3);
|
||||
--glow-warning: 0 0 20px rgba(251, 191, 36, 0.3);
|
||||
--glow-danger: 0 0 20px rgba(248, 113, 113, 0.3);
|
||||
--glow-info: 0 0 24px rgba(34, 211, 238, 0.4);
|
||||
--glow-success: 0 0 24px rgba(52, 211, 153, 0.35);
|
||||
--glow-warning: 0 0 24px rgba(251, 191, 36, 0.35);
|
||||
--glow-danger: 0 0 24px rgba(248, 113, 113, 0.35);
|
||||
|
||||
/* ==========================================================================
|
||||
6. GRAPH COLORS
|
||||
========================================================================== */
|
||||
--graph-node-default: rgba(42, 42, 69, 0.95);
|
||||
--graph-node-epic: rgba(167, 139, 250, 0.18);
|
||||
--graph-edge-default: rgba(150, 155, 180, 0.3);
|
||||
--graph-edge-selected: #a78bfa;
|
||||
--graph-node-default: rgba(55, 48, 163, 0.9);
|
||||
--graph-node-epic: rgba(139, 92, 246, 0.25);
|
||||
--graph-edge-default: rgba(99, 102, 241, 0.3);
|
||||
--graph-edge-selected: #22d3ee;
|
||||
--graph-edge-cycle: #fbbf24;
|
||||
|
||||
/* ==========================================================================
|
||||
7. SEMANTIC ALPHAS
|
||||
========================================================================== */
|
||||
--alpha-white-low: rgba(240, 240, 248, 0.05);
|
||||
--alpha-white-medium: rgba(240, 240, 248, 0.11);
|
||||
--alpha-white-high: rgba(240, 240, 248, 0.22);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.25);
|
||||
--alpha-white-low: rgba(240, 249, 255, 0.05);
|
||||
--alpha-white-medium: rgba(240, 249, 255, 0.1);
|
||||
--alpha-white-high: rgba(240, 249, 255, 0.2);
|
||||
--alpha-black-low: rgba(0, 0, 0, 0.3);
|
||||
--alpha-black-medium: rgba(0, 0, 0, 0.5);
|
||||
--alpha-black-high: rgba(0, 0, 0, 0.8);
|
||||
|
||||
|
|
@ -79,34 +79,34 @@
|
|||
--status-ready: rgba(52, 211, 153, 0.18);
|
||||
--status-in-progress: rgba(251, 191, 36, 0.18);
|
||||
--status-blocked: rgba(248, 113, 113, 0.18);
|
||||
--status-closed: rgba(144, 144, 168, 0.12);
|
||||
--status-deferred: rgba(144, 144, 168, 0.08);
|
||||
--status-closed: rgba(125, 211, 252, 0.12);
|
||||
--status-deferred: rgba(125, 211, 252, 0.08);
|
||||
|
||||
/* ==========================================================================
|
||||
9. SHADOWS
|
||||
========================================================================== */
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
|
||||
/* ==========================================================================
|
||||
10. AGENT ROLE COLORS
|
||||
========================================================================== */
|
||||
--agent-role-ui: #93c5fd;
|
||||
--agent-role-graph: #86efac;
|
||||
--agent-role-orchestrator: #d8b4fe;
|
||||
--agent-role-researcher: #fdba74;
|
||||
--agent-role-ui: #60a5fa;
|
||||
--agent-role-graph: #4ade80;
|
||||
--agent-role-orchestrator: #c084fc;
|
||||
--agent-role-researcher: #fb923c;
|
||||
|
||||
/* ==========================================================================
|
||||
11. SCROLLBARS
|
||||
========================================================================== */
|
||||
--scrollbar-track: rgba(240, 240, 248, 0.03);
|
||||
--scrollbar-thumb: rgba(150, 155, 180, 0.22);
|
||||
--scrollbar-thumb-hover: rgba(150, 155, 180, 0.38);
|
||||
--scrollbar-track: rgba(240, 249, 255, 0.03);
|
||||
--scrollbar-thumb: rgba(99, 102, 241, 0.25);
|
||||
--scrollbar-thumb-hover: rgba(99, 102, 241, 0.4);
|
||||
|
||||
/* ==========================================================================
|
||||
12. CODE/SYNTAX
|
||||
========================================================================== */
|
||||
--code-background: #151525;
|
||||
--code-text: #c5c5d8;
|
||||
--code-background: #1e1b4b;
|
||||
--code-text: #bfdbfe;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue