/* ══════════════════════════════════════════════════════════ FleetSpartan Portal — Theme System ══════════════════════════════════════════════════════════ Uses [data-theme] on for explicit toggle. Falls back to OS preference via prefers-color-scheme. Light values are defined in site.css :root. This file ONLY defines dark overrides + OS auto-detect. ══════════════════════════════════════════════════════════ */ /* ── Dark theme overrides ─────────────────────────────── */ html[data-theme="dark"] { color-scheme: dark; /* Greens */ --fs-green-050: #0d2614; --fs-green-100: #132e18; --fs-green-500: #34d058; --fs-green-600: #2db553; --fs-green-700: #22a84a; --fs-green-800: #1a8a3e; --fs-green-900: #166534; --fs-green-ring: rgba(52, 208, 88, 0.35); /* Ink */ --fs-ink-900: #f0f0f0; --fs-ink-800: #e0e0e0; --fs-ink-700: #c0c0c0; --fs-ink-600: #a0a0a0; --fs-ink-400: #666666; /* Alerts */ --fs-red-700: #f87171; --fs-red-600: #ef4444; /* Sidebar */ --sidebar-bg: #0a1a0e; --sidebar-text: #7aad86; --sidebar-hover: #162a1c; --sidebar-active: #34d058; --sidebar-section-label: #4d7a56; /* Header */ --header-bg: #061f0a; --header-border: #0a3a14; /* Content */ --content-bg: #121212; /* Surfaces */ --fs-page-bg: #121212; --fs-card-bg: #1e1e1e; --fs-card-border: #2a3a2e; --fs-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); --fs-surface-subtle: #262626; --fs-surface-100: #1e1e1e; --fs-surface-200: #262626; --fs-surface-50: #1a1a1a; --fs-surface-warm: #1e1e1e; /* Borders */ --fs-border: #3a3a3a; --fs-border-subtle: #333333; --fs-border-light: #2a2a2a; --fs-border-200: #3a3a3a; --fs-border-300: #444444; --fs-border-400: #333333; --fs-border-muted: #333333; --fs-border-medium: #3a3a3a; --fs-divider: #333333; /* Text */ --fs-text-primary: #e0e0e0; --fs-text-heading: #f0f0f0; --fs-text-900: #f0f0f0; --fs-text-800: #e0e0e0; --fs-text-700: #c8c8c8; --fs-text-secondary: #b0b0b0; --fs-text-600: #a0a0a0; --fs-text-muted: #999999; --fs-text-500: #888888; --fs-text-400: #666666; --fs-text-dim: #777777; --fs-text-subtle: #888888; --fs-text-faint: #777777; --fs-text-dark: #b0b0b0; --fs-text-on-dark: #f0f0f0; --fs-text-on-surface: #c0c0c0; --fs-text-white: #ffffff; /* Inputs */ --fs-input-border: #3a3a3a; --fs-input-bg: #262626; --fs-input-focus-border: #34d058; --fs-input-focus-ring: rgba(52, 208, 88, 0.3); --fs-input-disabled-bg: #1e1e1e; --fs-input-placeholder: #666; /* Buttons */ --fs-btn-primary: #1a8a3e; --fs-btn-primary-hover: #0E7732; --fs-btn-secondary: #555d66; --fs-btn-secondary-hover: #6b7280; --fs-btn-danger: #ef4444; --fs-btn-danger-hover: #dc2626; /* Green accents */ --fs-green-accent: #2db553; --fs-green-dark: #34d058; --fs-green-muted: #4caf50; --fs-green-bright: #6ee7a0; --fs-green-text: #6ee7a0; /* Blue accents */ --fs-blue-accent: #64b5f6; --fs-blue-hover: #42a5f5; --fs-blue-600: #3b82f6; --fs-blue-bright: #60a5fa; --fs-blue-dark: #90caf9; --fs-blue-light: #1e3a5f; /* Error / danger */ --fs-error-bg: #3d1f1f; --fs-error-border: #5c2626; --fs-error-accent: #f87171; --fs-error-text: #fca5a5; --fs-error-500: #f87171; /* Success */ --fs-success-bg: #1a3a24; --fs-success-border: #2a5a34; --fs-success-accent: #34d058; --fs-success-text: #6ee7a0; /* Warning */ --fs-warning-accent: #fbbf24; --fs-warning-bg: #3d3520; --fs-warning-text: #fcd34d; /* Overlay */ --fs-overlay-bg: rgba(0, 0, 0, 0.7); --fs-overlay-backdrop: rgba(0, 0, 0, 0.7); /* Grid panel */ --fs-grid-panel-bg: #1e1e1e; --fs-grid-panel-border: #2a3a2e; /* Table / grid rows */ --fs-row-hover: #262626; --fs-row-stripe: #1a1a1a; --fs-row-selected: #1a3a24; /* Shadows */ --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --fs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } /* ── Auto-detect OS preference when no explicit theme set ─ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --fs-green-050: #0d2614; --fs-green-100: #132e18; --fs-green-500: #34d058; --fs-green-600: #2db553; --fs-green-700: #22a84a; --fs-green-800: #1a8a3e; --fs-green-900: #166534; --fs-green-ring: rgba(52, 208, 88, 0.35); --fs-ink-900: #f0f0f0; --fs-ink-800: #e0e0e0; --fs-ink-700: #c0c0c0; --fs-ink-600: #a0a0a0; --fs-ink-400: #666666; --fs-red-700: #f87171; --fs-red-600: #ef4444; --sidebar-bg: #0a1a0e; --sidebar-text: #7aad86; --sidebar-hover: #162a1c; --sidebar-active: #34d058; --sidebar-section-label: #4d7a56; --header-bg: #061f0a; --header-border: #0a3a14; --content-bg: #121212; --fs-page-bg: #121212; --fs-card-bg: #1e1e1e; --fs-card-border: #2a3a2e; --fs-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); --fs-surface-subtle: #262626; --fs-surface-100: #1e1e1e; --fs-surface-200: #262626; --fs-surface-50: #1a1a1a; --fs-surface-warm: #1e1e1e; --fs-border: #3a3a3a; --fs-border-subtle: #333333; --fs-border-light: #2a2a2a; --fs-border-200: #3a3a3a; --fs-border-300: #444444; --fs-border-400: #333333; --fs-border-muted: #333333; --fs-border-medium: #3a3a3a; --fs-divider: #333333; --fs-text-primary: #e0e0e0; --fs-text-heading: #f0f0f0; --fs-text-900: #f0f0f0; --fs-text-800: #e0e0e0; --fs-text-700: #c8c8c8; --fs-text-secondary: #b0b0b0; --fs-text-600: #a0a0a0; --fs-text-muted: #999999; --fs-text-500: #888888; --fs-text-400: #666666; --fs-text-dim: #777777; --fs-text-subtle: #888888; --fs-text-faint: #777777; --fs-text-dark: #b0b0b0; --fs-text-on-dark: #f0f0f0; --fs-text-on-surface: #c0c0c0; --fs-text-white: #ffffff; --fs-input-border: #3a3a3a; --fs-input-bg: #262626; --fs-input-focus-border: #34d058; --fs-input-focus-ring: rgba(52, 208, 88, 0.3); --fs-input-disabled-bg: #1e1e1e; --fs-input-placeholder: #666; --fs-btn-primary: #1a8a3e; --fs-btn-primary-hover: #0E7732; --fs-btn-secondary: #555d66; --fs-btn-secondary-hover: #6b7280; --fs-btn-danger: #ef4444; --fs-btn-danger-hover: #dc2626; --fs-green-accent: #2db553; --fs-green-dark: #34d058; --fs-green-muted: #4caf50; --fs-green-bright: #6ee7a0; --fs-green-text: #6ee7a0; --fs-blue-accent: #64b5f6; --fs-blue-hover: #42a5f5; --fs-blue-600: #3b82f6; --fs-blue-bright: #60a5fa; --fs-blue-dark: #90caf9; --fs-blue-light: #1e3a5f; --fs-error-bg: #3d1f1f; --fs-error-border: #5c2626; --fs-error-accent: #f87171; --fs-error-text: #fca5a5; --fs-error-500: #f87171; --fs-success-bg: #1a3a24; --fs-success-border: #2a5a34; --fs-success-accent: #34d058; --fs-success-text: #6ee7a0; --fs-warning-accent: #fbbf24; --fs-warning-bg: #3d3520; --fs-warning-text: #fcd34d; --fs-overlay-bg: rgba(0, 0, 0, 0.7); --fs-overlay-backdrop: rgba(0, 0, 0, 0.7); --fs-grid-panel-bg: #1e1e1e; --fs-grid-panel-border: #2a3a2e; --fs-row-hover: #262626; --fs-row-stripe: #1a1a1a; --fs-row-selected: #1a3a24; --fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --fs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } } /* ── Smooth transitions when toggling themes ──────────── */ html[data-theme-transition], html[data-theme-transition] *, html[data-theme-transition] *::before, html[data-theme-transition] *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; }