/** * Typing App Theme System * Change data-theme on to switch themes. * Override only the variables below to restyle the whole app. */ :root, [data-theme="light"] { /* Brand */ --color-primary: #2563eb; --color-primary-dark: #1d4ed8; --color-primary-light: #60a5fa; --color-secondary: #06b6d4; --color-secondary-dark: #0891b2; --color-accent: #f59e0b; --color-accent-gold: #fbbf24; --color-accent-purple: #8b5cf6; /* Surfaces */ --color-bg: #f4f7ff; --color-bg-soft: #eef4ff; --color-bg-warm: #fff9f0; --color-surface: #ffffff; --color-surface-muted: #f8fafc; --color-surface-elevated: #ffffff; --color-surface-sidebar: #e8f0fe; --color-surface-card: #ffffff; --color-surface-overlay: rgba(244, 247, 255, 0.88); /* Text */ --color-text: #1e293b; --color-text-muted: #64748b; --color-text-soft: #94a3b8; --color-text-inverse: #ffffff; --color-heading: #0f172a; --color-brand-primary: #2563eb; --color-brand-accent: #06b6d4; /* Borders */ --color-border: #dbe4f0; --color-border-strong: #c7d5e8; --color-border-focus: #60a5fa; /* Status / gamification */ --color-success: #10b981; --color-success-soft: #d1fae5; --color-success-text: #047857; --color-warning: #f59e0b; --color-warning-soft: #fef3c7; --color-warning-text: #b45309; --color-error: #ef4444; --color-error-soft: #fee2e2; --color-error-text: #be123c; --color-info: #3b82f6; --color-info-soft: #dbeafe; --color-info-text: #1d4ed8; --color-xp: #f59e0b; --color-streak: #10b981; --color-badge: #8b5cf6; --color-score: #06b6d4; /* Gradients */ --gradient-page: radial-gradient(circle at top left, #ffffff 0%, #f4f7ff 45%, #fff9f0 100%); --gradient-nav: linear-gradient(135deg, #2563eb 0%, #06b6d4 55%, #38bdf8 100%); --gradient-footer: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #1d4ed8 100%); --gradient-primary: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); --gradient-xp: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --gradient-hero: linear-gradient(135deg, #eff6ff 0%, #ecfeff 50%, #fffbeb 100%); --gradient-result-hero: linear-gradient(160deg, #dbeafe 0%, #cffafe 45%, #fef3c7 100%); --gradient-score-ring: linear-gradient(160deg, #38bdf8 0%, #2563eb 50%, #8b5cf6 100%); --gradient-button: linear-gradient(135deg, #38bdf8 0%, #2563eb 50%, #06b6d4 100%); --gradient-menu: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --gradient-menu-hover: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); /* Shadows */ --shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.08); --shadow-md: 0 8px 24px rgba(37, 99, 235, 0.12); --shadow-lg: 0 16px 40px rgba(37, 99, 235, 0.14); --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.08); --shadow-key: 0 4px 0 var(--color-key-shadow); --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.85); /* Keyboard / typing */ --color-key-bg: #fde68a; --color-key-border: #f59e0b; --color-key-shadow: #d97706; --color-key-text: #1e293b; --color-key-highlight: #2563eb; --color-key-correct: #10b981; --color-key-wrong: #ef4444; --color-key-reset: #fde68a; --color-key-finger: #1e293b; --color-monitor-bg: #fef3c7; --color-monitor-border: #f59e0b; /* Typing text states */ --color-typed: #f59e0b; --color-current-bg: #2563eb; --color-current-text: #ffffff; --color-untyped: #1e293b; --color-char-wrong: #ef4444; /* Charts */ --color-chart-grid: #e8eef7; --color-chart-line: rgba(37, 99, 235, 1); --color-chart-line-alt: rgba(6, 182, 212, 1); /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Typography */ --font-family: "Segoe UI", Arial, "Helvetica Neue", Helvetica, sans-serif; --font-family-display: "Segoe UI", Arial, sans-serif; /* Spacing helpers */ --nav-height: 40px; --transition-fast: 0.2s ease; --transition-normal: 0.35s ease; } [data-theme="sunset"] { --color-primary: #ea580c; --color-primary-dark: #c2410c; --color-primary-light: #fb923c; --color-secondary: #f97316; --color-secondary-dark: #ea580c; --color-accent: #facc15; --color-accent-gold: #fde047; --color-accent-purple: #f472b6; --color-bg: #fff7ed; --color-bg-soft: #ffedd5; --color-bg-warm: #fffbeb; --color-surface: #ffffff; --color-surface-muted: #fff7ed; --color-surface-sidebar: #ffedd5; --color-text: #431407; --color-text-muted: #9a3412; --color-text-soft: #c2410c; --color-heading: #7c2d12; --color-brand-primary: #ea580c; --color-brand-accent: #f97316; --color-border: #fed7aa; --color-border-strong: #fdba74; --color-success-soft: #dcfce7; --color-warning-soft: #fef9c3; --color-info-soft: #ffedd5; --color-xp: #f59e0b; --color-score: #ea580c; --gradient-page: radial-gradient(circle at top left, #ffffff 0%, #fff7ed 45%, #ffedd5 100%); --gradient-nav: linear-gradient(135deg, #ea580c 0%, #f97316 55%, #facc15 100%); --gradient-footer: linear-gradient(135deg, #fb923c 0%, #ea580c 55%, #c2410c 100%); --gradient-primary: linear-gradient(135deg, #ea580c 0%, #f97316 100%); --gradient-hero: linear-gradient(135deg, #fff7ed 0%, #ffedd5 50%, #fef3c7 100%); --gradient-result-hero: linear-gradient(160deg, #ffedd5 0%, #fed7aa 45%, #fef3c7 100%); --gradient-button: linear-gradient(135deg, #fb923c 0%, #ea580c 50%, #f97316 100%); --gradient-menu: linear-gradient(135deg, #f97316 0%, #ea580c 100%); --gradient-menu-hover: linear-gradient(135deg, #facc15 0%, #f59e0b 100%); --color-key-bg: #fed7aa; --color-key-border: #ea580c; --color-key-shadow: #c2410c; --color-key-highlight: #ea580c; --color-monitor-bg: #fff7ed; --color-monitor-border: #fdba74; --color-current-bg: #ea580c; --color-chart-grid: #ffedd5; --color-chart-line: rgba(234, 88, 12, 1); --color-chart-line-alt: rgba(249, 115, 22, 1); } [data-theme="forest"] { --color-primary: #059669; --color-primary-dark: #047857; --color-primary-light: #34d399; --color-secondary: #10b981; --color-secondary-dark: #059669; --color-accent: #84cc16; --color-accent-gold: #a3e635; --color-accent-purple: #4ade80; --color-bg: #f0fdf4; --color-bg-soft: #ecfccb; --color-bg-warm: #f7fee7; --color-surface: #ffffff; --color-surface-muted: #f0fdf4; --color-surface-sidebar: #dcfce7; --color-text: #14532d; --color-text-muted: #166534; --color-text-soft: #15803d; --color-heading: #052e16; --color-brand-primary: #059669; --color-brand-accent: #10b981; --color-border: #bbf7d0; --color-border-strong: #86efac; --color-success-soft: #dcfce7; --color-info-soft: #ecfccb; --color-xp: #84cc16; --color-score: #10b981; --gradient-page: radial-gradient(circle at top left, #ffffff 0%, #f0fdf4 50%, #ecfccb 100%); --gradient-nav: linear-gradient(135deg, #059669 0%, #10b981 55%, #34d399 100%); --gradient-footer: linear-gradient(135deg, #34d399 0%, #059669 55%, #047857 100%); --gradient-primary: linear-gradient(135deg, #059669 0%, #10b981 100%); --gradient-hero: linear-gradient(135deg, #f0fdf4 0%, #ecfccb 50%, #f7fee7 100%); --gradient-result-hero: linear-gradient(160deg, #dcfce7 0%, #bbf7d0 45%, #ecfccb 100%); --gradient-button: linear-gradient(135deg, #34d399 0%, #059669 50%, #10b981 100%); --gradient-menu: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-menu-hover: linear-gradient(135deg, #84cc16 0%, #65a30d 100%); --color-key-bg: #bbf7d0; --color-key-border: #059669; --color-key-shadow: #047857; --color-key-highlight: #059669; --color-monitor-bg: #ecfccb; --color-monitor-border: #86efac; --color-current-bg: #059669; --color-chart-grid: #dcfce7; --color-chart-line: rgba(5, 150, 105, 1); --color-chart-line-alt: rgba(16, 185, 129, 1); } [data-theme="ocean"] { --color-primary: #0369a1; --color-primary-dark: #075985; --color-primary-light: #38bdf8; --color-secondary: #0ea5e9; --color-secondary-dark: #0284c7; --color-accent: #22d3ee; --color-accent-gold: #67e8f9; --color-accent-purple: #38bdf8; --color-bg: #ecfeff; --color-bg-soft: #e0f2fe; --color-bg-warm: #f0f9ff; --color-surface: #ffffff; --color-surface-muted: #f0f9ff; --color-surface-sidebar: #e0f2fe; --color-text: #0c4a6e; --color-text-muted: #0369a1; --color-text-soft: #0284c7; --color-heading: #082f49; --color-brand-primary: #0369a1; --color-brand-accent: #0ea5e9; --color-border: #bae6fd; --color-border-strong: #7dd3fc; --color-info-soft: #e0f2fe; --color-xp: #22d3ee; --color-score: #0ea5e9; --gradient-page: radial-gradient(circle at top left, #ffffff 0%, #ecfeff 45%, #e0f2fe 100%); --gradient-nav: linear-gradient(135deg, #0369a1 0%, #0ea5e9 55%, #22d3ee 100%); --gradient-footer: linear-gradient(135deg, #38bdf8 0%, #0369a1 55%, #075985 100%); --gradient-primary: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%); --gradient-hero: linear-gradient(135deg, #ecfeff 0%, #e0f2fe 50%, #f0f9ff 100%); --gradient-result-hero: linear-gradient(160deg, #e0f2fe 0%, #bae6fd 45%, #ecfeff 100%); --gradient-button: linear-gradient(135deg, #38bdf8 0%, #0369a1 50%, #0ea5e9 100%); --gradient-menu: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); --gradient-menu-hover: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); --color-key-bg: #bae6fd; --color-key-border: #0369a1; --color-key-shadow: #075985; --color-key-highlight: #0369a1; --color-monitor-bg: #e0f2fe; --color-monitor-border: #7dd3fc; --color-current-bg: #0369a1; --color-chart-grid: #e0f2fe; --color-chart-line: rgba(3, 105, 161, 1); --color-chart-line-alt: rgba(14, 165, 233, 1); } [data-theme="midnight"] { --color-primary: #6366f1; --color-primary-dark: #4f46e5; --color-primary-light: #818cf8; --color-secondary: #8b5cf6; --color-secondary-dark: #7c3aed; --color-accent: #a78bfa; --color-accent-gold: #c4b5fd; --color-accent-purple: #818cf8; --color-bg: #0f172a; --color-bg-soft: #1e293b; --color-bg-warm: #111827; --color-surface: #1e293b; --color-surface-muted: #334155; --color-surface-elevated: #1e293b; --color-surface-sidebar: #1e293b; --color-surface-card: #1e293b; --color-surface-overlay: rgba(15, 23, 42, 0.92); --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-text-soft: #64748b; --color-text-inverse: #f8fafc; --color-heading: #f8fafc; --color-brand-primary: #818cf8; --color-brand-accent: #a78bfa; --color-border: #334155; --color-border-strong: #475569; --color-border-focus: #818cf8; --color-success-soft: #064e3b; --color-warning-soft: #451a03; --color-error-soft: #4c0519; --color-info-soft: #1e3a8a; --color-success-text: #6ee7b7; --color-warning-text: #fcd34d; --color-error-text: #fda4af; --color-info-text: #93c5fd; --color-xp: #a78bfa; --color-score: #818cf8; --gradient-page: radial-gradient(circle at top left, #1e293b 0%, #0f172a 55%, #020617 100%); --gradient-nav: linear-gradient(135deg, #4f46e5 0%, #6366f1 55%, #8b5cf6 100%); --gradient-footer: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #312e81 100%); --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --gradient-hero: linear-gradient(135deg, #1e293b 0%, #312e81 50%, #0f172a 100%); --gradient-result-hero: linear-gradient(160deg, #312e81 0%, #1e293b 45%, #0f172a 100%); --gradient-score-ring: linear-gradient(160deg, #818cf8 0%, #6366f1 50%, #a78bfa 100%); --gradient-button: linear-gradient(135deg, #818cf8 0%, #6366f1 50%, #8b5cf6 100%); --gradient-menu: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); --gradient-menu-hover: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35); --color-key-bg: #334155; --color-key-border: #6366f1; --color-key-shadow: #312e81; --color-key-text: #f8fafc; --color-key-highlight: #818cf8; --color-key-finger: #e2e8f0; --color-monitor-bg: #1e293b; --color-monitor-border: #475569; --color-typed: #a78bfa; --color-current-bg: #6366f1; --color-current-text: #ffffff; --color-untyped: #e2e8f0; --color-chart-grid: #334155; --color-chart-line: rgba(129, 140, 248, 1); --color-chart-line-alt: rgba(167, 139, 250, 1); } [data-theme="neon"] { --color-primary: #d946ef; --color-primary-dark: #a21caf; --color-primary-light: #e879f9; --color-secondary: #22d3ee; --color-secondary-dark: #0891b2; --color-accent: #f472b6; --color-accent-gold: #facc15; --color-accent-purple: #c084fc; --color-bg: #1e1b4b; --color-bg-soft: #312e81; --color-bg-warm: #172554; --color-surface: #312e81; --color-surface-muted: #3730a3; --color-surface-sidebar: #312e81; --color-surface-card: #312e81; --color-text: #f5f3ff; --color-text-muted: #c4b5fd; --color-text-soft: #a5b4fc; --color-heading: #faf5ff; --color-brand-primary: #e879f9; --color-brand-accent: #22d3ee; --color-border: #4c1d95; --color-border-strong: #6d28d9; --color-success-soft: #064e3b; --color-warning-soft: #422006; --color-info-soft: #164e63; --color-xp: #facc15; --color-score: #22d3ee; --gradient-page: radial-gradient(circle at top left, #312e81 0%, #1e1b4b 50%, #172554 100%); --gradient-nav: linear-gradient(135deg, #d946ef 0%, #22d3ee 55%, #f472b6 100%); --gradient-footer: linear-gradient(135deg, #e879f9 0%, #d946ef 55%, #a21caf 100%); --gradient-primary: linear-gradient(135deg, #d946ef 0%, #22d3ee 100%); --gradient-hero: linear-gradient(135deg, #312e81 0%, #1e1b4b 50%, #172554 100%); --gradient-result-hero: linear-gradient(160deg, #6d28d9 0%, #312e81 45%, #1e1b4b 100%); --gradient-button: linear-gradient(135deg, #e879f9 0%, #d946ef 50%, #22d3ee 100%); --gradient-menu: linear-gradient(135deg, #d946ef 0%, #a21caf 100%); --gradient-menu-hover: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); --shadow-sm: 0 2px 12px rgba(217, 70, 239, 0.25); --shadow-md: 0 8px 24px rgba(34, 211, 238, 0.2); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35); --color-key-bg: #4c1d95; --color-key-border: #d946ef; --color-key-shadow: #a21caf; --color-key-text: #faf5ff; --color-key-highlight: #22d3ee; --color-key-finger: #f5f3ff; --color-monitor-bg: #312e81; --color-monitor-border: #6d28d9; --color-typed: #22d3ee; --color-current-bg: #d946ef; --color-current-text: #ffffff; --color-untyped: #ede9fe; --color-chart-grid: #3730a3; --color-chart-line: rgba(217, 70, 239, 1); --color-chart-line-alt: rgba(34, 211, 238, 1); } [data-theme="royal"] { --color-primary: #b45309; --color-primary-dark: #92400e; --color-primary-light: #f59e0b; --color-secondary: #d97706; --color-secondary-dark: #b45309; --color-accent: #fbbf24; --color-accent-gold: #fde047; --color-accent-purple: #a16207; --color-bg: #fffbeb; --color-bg-soft: #fef3c7; --color-bg-warm: #fff7ed; --color-surface: #ffffff; --color-surface-muted: #fffbeb; --color-surface-sidebar: #fef3c7; --color-text: #78350f; --color-text-muted: #92400e; --color-text-soft: #b45309; --color-heading: #451a03; --color-brand-primary: #b45309; --color-brand-accent: #d97706; --color-border: #fde68a; --color-border-strong: #fcd34d; --color-success-soft: #ecfccb; --color-warning-soft: #fef3c7; --color-info-soft: #fff7ed; --color-xp: #fbbf24; --color-score: #d97706; --color-badge: #b45309; --gradient-page: radial-gradient(circle at top left, #ffffff 0%, #fffbeb 45%, #fef3c7 100%); --gradient-nav: linear-gradient(135deg, #b45309 0%, #d97706 55%, #fbbf24 100%); --gradient-footer: linear-gradient(135deg, #f59e0b 0%, #b45309 55%, #92400e 100%); --gradient-primary: linear-gradient(135deg, #b45309 0%, #fbbf24 100%); --gradient-hero: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%); --gradient-result-hero: linear-gradient(160deg, #fef3c7 0%, #fde68a 45%, #fffbeb 100%); --gradient-score-ring: linear-gradient(160deg, #fbbf24 0%, #b45309 50%, #d97706 100%); --gradient-button: linear-gradient(135deg, #fbbf24 0%, #b45309 50%, #d97706 100%); --gradient-menu: linear-gradient(135deg, #d97706 0%, #b45309 100%); --gradient-menu-hover: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); --color-key-bg: #fde68a; --color-key-border: #b45309; --color-key-shadow: #92400e; --color-key-highlight: #b45309; --color-monitor-bg: #fef3c7; --color-monitor-border: #fcd34d; --color-typed: #d97706; --color-current-bg: #b45309; --color-chart-grid: #fef3c7; --color-chart-line: rgba(180, 83, 9, 1); --color-chart-line-alt: rgba(217, 119, 6, 1); }