/* ============================================================ dark-mode.css — dark theme overrides. Driven by the data-theme attribute on , set by theme-mode.js BEFORE first paint to avoid FOUC. ========================================================== */ /* When system prefers dark and no user preference is stored */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #0b1220; --surface: #111a2e; --surface-elevated: #15203a; --text: #e6ecff; --text-muted: #94a3b8; --border: #1f2a44; --primary-tint: rgba(99, 102, 241, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* Hide sun in dark mode by default */ :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } /* Explicit dark theme via data-theme="dark" */ :root[data-theme="dark"] { --background: #0b1220; --surface: #111a2e; --surface-elevated: #15203a; --text: #e6ecff; --text-muted: #94a3b8; --border: #1f2a44; --primary-tint: rgba(99, 102, 241, 0.18); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); color-scheme: dark; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* Explicit light theme overrides */ :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] { color-scheme: light; } /* Make the header darker in dark mode for contrast */ :root[data-theme="dark"] .site-header, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header { background-color: color-mix(in srgb, var(--background) 88%, transparent); } } /* Skeleton colors in dark mode */ :root[data-theme="dark"] .downloader__skeleton-line, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .downloader__skeleton-line { background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%); } }