/** * themes.css — Single Source of Truth for newsletterBot Theme Variables * * All color themes are defined here. No other file should declare * --nb-* custom properties. Pages pick up the active theme via * the `data-theme` attribute on . * * Extracted from src/views/partials/sidebar-navigation.hbs which * contains the authoritative values with WCAG 2.1 accessibility * and design-rationale comments. * * Theme order: warm (default/root) → light → dark → amoled */ /* ============================================ THEME SYSTEM - Research-Backed Color Themes ============================================ Based on WCAG 2.1 accessibility and eye comfort research Muted, professional colors with 4.5:1+ contrast ratios IMPORTANT: :root must come FIRST so [data-theme] selectors can override it */ /* Warm Light Theme - Paper/sepia tones (DEFAULT) */ :root, [data-theme="warm"] { /* Primary Actions - Plum Purple (Brand) */ --nb-primary: #7C3AAE; /* Deep plum - brand color */ --nb-primary-dark: #632F8F; /* Darker plum */ --nb-primary-light: #F4EBFB; /* Light plum backgrounds */ /* Success States - Olive Drab (Triadic) */ --nb-success: #6B8E23; /* Olive drab - warmer, natural */ --nb-success-dark: #556B1C; /* Darker olive */ --nb-success-light: #E8F0D5; /* Light olive backgrounds */ /* Danger/Destructive - Terracotta (Warm) */ --nb-danger: #C74A3C; /* Warm terracotta - adjusted */ --nb-danger-dark: #A03D30; /* Darker terracotta */ --nb-danger-light: #FFEBE8; /* Light red backgrounds */ /* Info/Metadata - Dark Goldenrod (Complementary) */ --nb-amber: #B8860B; /* True complementary gold */ --nb-amber-dark: #956F09; /* Darker goldenrod */ --nb-amber-light: #FFF4D4; /* Light gold backgrounds */ /* Accent - Light Sea Green (Analogous) */ --nb-accent: #20B2AA; /* Teal - analogous to purple */ --nb-accent-dark: #1A8F89; /* Darker teal */ --nb-accent-light: #D5F4F1; /* Light teal backgrounds */ /* Semantic Colors - Text & Borders */ --nb-text: #3E2F1F; /* Warm dark brown - gentle */ --nb-text-secondary: #55453A; /* Mid-tone brown - between text and muted */ --nb-text-muted: #6B5C4C; /* Medium brown for secondary */ --nb-border: #3E2F1F; /* Bold borders match text (NeoBrutalism) */ /* Semantic Colors - Backgrounds */ --nb-bg: #FBF8F3; /* Warm off-white - paper tone */ --nb-surface: #F3EDE3; /* Slightly darker paper */ /* Navigation */ --nb-nav-bg: #F3EDE3; /* Warm paper sidebar */ --nb-nav-header: #7C3AAE; /* Plum purple header */ --nb-nav-active: #F4EBFB; /* Light plum for active */ } /* Light Theme - Professional purple-centered */ [data-theme="light"] { /* Primary Actions - Royal Purple (Brand) */ --nb-primary: #8250DF; /* Vibrant purple - brand color */ --nb-primary-dark: #6639BA; /* Darker purple */ --nb-primary-light: #FBEFFF; /* Light purple backgrounds */ /* Success States - Sea Green (Triadic) */ --nb-success: #2E8B57; /* Sea green - professional */ --nb-success-dark: #237044; /* Darker sea green */ --nb-success-light: #DFF4E9; /* Light green backgrounds */ /* Danger/Destructive - Crimson (High Contrast) */ --nb-danger: #DC143C; /* Crimson - clear signal */ --nb-danger-dark: #B01030; /* Darker crimson */ --nb-danger-light: #FFEBEF; /* Light red backgrounds */ /* Info/Metadata - Goldenrod (Complementary) */ --nb-amber: #DAA520; /* Bright goldenrod - true complement */ --nb-amber-dark: #B8881A; /* Darker goldenrod */ --nb-amber-light: #FFF8D6; /* Light gold backgrounds */ /* Accent - Steel Blue (Analogous) */ --nb-accent: #4682B4; /* Steel blue - professional */ --nb-accent-dark: #3A6A91; /* Darker steel blue */ --nb-accent-light: #E3F0F9; /* Light blue backgrounds */ /* Semantic Colors - Text & Borders */ --nb-text: #24292F; /* Soft black - easier on eyes than #000 */ --nb-text-secondary: #3D4550; /* Mid-tone gray - between text and muted */ --nb-text-muted: #57606A; /* Medium gray for secondary text */ --nb-border: #24292F; /* Bold borders match text (NeoBrutalism) */ /* Semantic Colors - Backgrounds */ --nb-bg: #FFFFFF; /* Pure white for max brightness */ --nb-surface: #F6F8FA; /* Very light gray for panels */ /* Navigation */ --nb-nav-bg: #F6F8FA; /* Light gray sidebar */ --nb-nav-header: #8250DF; /* Purple header */ --nb-nav-active: #FBEFFF; /* Light purple for active */ } /* Dark Theme - Purple-centered dark mode */ [data-theme="dark"] { /* Primary Actions - Lavender Purple (Brand) */ --nb-primary: #A371F7; /* Soft purple - brand color */ --nb-primary-dark: #B392F0; /* Lighter purple */ --nb-primary-light: #2E2438; /* Dark purple backgrounds */ /* Success States - Medium Sea Green (Triadic) */ --nb-success: #3CB371; /* Medium sea green - readable */ --nb-success-dark: #52C785; /* Lighter green */ --nb-success-light: #1B3A2A; /* Dark green backgrounds */ /* Danger/Destructive - Light Coral (Warm) */ --nb-danger: #F08080; /* Light coral - gentle on eyes */ --nb-danger-dark: #FF9999; /* Lighter coral */ --nb-danger-light: #3D1F1F; /* Dark red backgrounds */ /* Info/Metadata - Sandy Brown (Complementary) */ --nb-amber: #F4A460; /* Sandy brown - warm complement */ --nb-amber-dark: #FFB673; /* Lighter sandy */ --nb-amber-light: #3D2F1F; /* Dark gold backgrounds */ /* Accent - Cornflower Blue (Analogous) */ --nb-accent: #6495ED; /* Cornflower blue - harmonious */ --nb-accent-dark: #7BA5F5; /* Lighter blue */ --nb-accent-light: #1F2D3D; /* Dark blue backgrounds */ /* Semantic Colors - Text & Borders */ --nb-text: #C9D1D9; /* Muted gray-white - reduced brilliance */ --nb-text-secondary: #A8B1BB; /* Mid-tone gray - between text and muted */ --nb-text-muted: #848D97; /* Medium gray for secondary */ --nb-border: #252A30; /* Subtle dark borders - visible but not harsh */ /* Semantic Colors - Backgrounds */ --nb-bg: #0D1117; /* Very dark but not pure black */ --nb-surface: #161B22; /* Slightly lighter for panels */ /* Navigation */ --nb-nav-bg: #161B22; /* Dark sidebar */ --nb-nav-header: #A371F7; /* Lavender purple header */ --nb-nav-active: #2E2438; /* Dark purple for active */ } /* AMOLED Dark Theme - OLED-optimized purple */ [data-theme="amoled"] { /* Primary Actions - Neon Purple (Brand) */ --nb-primary: #E040FB; /* Bright purple - OLED glow */ --nb-primary-dark: #E757FF; /* Lighter purple */ --nb-primary-light: #2D0A33; /* Dark purple backgrounds */ /* Success States - Spring Green (Triadic) */ --nb-success: #00FF7F; /* Spring green - vivid on OLED */ --nb-success-dark: #33FF99; /* Lighter green */ --nb-success-light: #003D20; /* Dark green backgrounds */ /* Danger/Destructive - Salmon (Warm) */ --nb-danger: #FA8072; /* Salmon - softer than harsh red */ --nb-danger-dark: #FF9988; /* Lighter salmon */ --nb-danger-light: #330F0C; /* Dark red backgrounds */ /* Info/Metadata - Gold (Complementary) */ --nb-amber: #FFD700; /* Pure gold - true complement */ --nb-amber-dark: #FFE033; /* Lighter gold */ --nb-amber-light: #332B00; /* Dark gold backgrounds */ /* Accent - Deep Sky Blue (Analogous) */ --nb-accent: #00BFFF; /* Deep sky blue - OLED pop */ --nb-accent-dark: #33CCFF; /* Lighter sky blue */ --nb-accent-light: #003D52; /* Dark blue backgrounds */ /* Semantic Colors - Text & Borders */ --nb-text: #D1D1D1; /* Muted light gray - reduced brilliance */ --nb-text-secondary: #B8B8B8; /* Mid-tone gray - between text and muted */ --nb-text-muted: #9E9E9E; /* Light gray for secondary */ --nb-border: #1A1A1A; /* Subtle dark borders - OLED-friendly, visible */ /* Semantic Colors - Backgrounds */ --nb-bg: #000000; /* Pure black - OLED power saving */ --nb-surface: #121212; /* Very dark gray for panels */ /* Navigation */ --nb-nav-bg: #000000; /* Pure black sidebar */ --nb-nav-header: #E040FB; /* Bright purple header */ --nb-nav-active: #1A0D1F; /* Dark purple for active */ } /* Reduce transitions during preview mode to prevent stacking */ [data-preview-mode="true"] * { transition-duration: 0.08s !important; }