/* ============================================================ Fingers For Toes - Dark Mode Three-layer approach: 1. OS-level detection (prefers-color-scheme) 2. User toggle (data-theme="dark" on ) 3. Theme-specific dark variants (injected via CSS vars) ============================================================ */ /* Auto-detect OS dark mode preference */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --theme-color-bg: var(--theme-dark-bg); --theme-color-surface: var(--theme-dark-surface); --theme-color-text: var(--theme-dark-text); --theme-color-text-secondary: var(--theme-dark-text-secondary); } html:not([data-theme="light"]) .flash-success { background: #1B4332; color: #95D5B2; border-color: #2D6A4F; } html:not([data-theme="light"]) .flash-error { background: #4A1519; color: #F5A3A3; border-color: #6B2024; } html:not([data-theme="light"]) .flash-info { background: #0C2D3E; color: #90CDF4; border-color: #14455E; } html:not([data-theme="light"]) .result-bar-track { background: rgba(255, 255, 255, 0.1); } html:not([data-theme="light"]) .form-control { border-color: rgba(255, 255, 255, 0.2); } html:not([data-theme="light"]) .guidelines-box { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } } /* Explicit user toggle: dark mode ON */ html[data-theme="dark"] { --theme-color-bg: var(--theme-dark-bg); --theme-color-surface: var(--theme-dark-surface); --theme-color-text: var(--theme-dark-text); --theme-color-text-secondary: var(--theme-dark-text-secondary); } html[data-theme="dark"] .flash-success { background: #1B4332; color: #95D5B2; border-color: #2D6A4F; } html[data-theme="dark"] .flash-error { background: #4A1519; color: #F5A3A3; border-color: #6B2024; } html[data-theme="dark"] .flash-info { background: #0C2D3E; color: #90CDF4; border-color: #14455E; } html[data-theme="dark"] .result-bar-track { background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .form-control { border-color: rgba(255, 255, 255, 0.2); } html[data-theme="dark"] .guidelines-box { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .cookie-banner { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .question-list-item { border: 1px solid rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .pagination a { border-color: rgba(255, 255, 255, 0.2); } /* Dark mode toggle icon swap */ .dark-mode-toggle .icon-sun { display: none; } .dark-mode-toggle .icon-moon { display: inline; } html[data-theme="dark"] .dark-mode-toggle .icon-sun { display: inline; } html[data-theme="dark"] .dark-mode-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .dark-mode-toggle .icon-sun { display: inline; } html:not([data-theme="light"]) .dark-mode-toggle .icon-moon { display: none; } }