/** * assets/css/dark-mode.css * --------------------------------------------------------------------- * Dark theme — overrides the same CSS custom properties style.css/ * app.css/admin.css already use everywhere, so every existing * component just works without touching a single other file. Applied * whenever carries data-theme="dark" (see assets/js/theme.js). * * Colours here are a fresh dark palette, not a mechanical inversion of * the light one — a straight invert tends to look muddy. The violet * brand colour carries through both themes; only its exact shade * shifts for contrast against a dark background. * --------------------------------------------------------------------- */ :root[data-theme="dark"]{ --paper:#14161F; --paper-raise:#1D2030; --ink:#F1F0ED; --ink-soft:#B7BAC8; --ink-faint:#7A7D8C; --line:#2C2F3F; --violet:#7C74F2; --violet-deep:#9891F5; --violet-tint:#26224D; --mint:#34D399; --mint-tint:#122A22; --coral:#F87171; --coral-tint:#3A1A1A; --shadow-lift:0 12px 32px rgba(0,0,0,0.45); } /* A handful of spots this app sets an explicit light-mode colour inline rather than via a variable — corrected here rather than in every template, so this file stays the single place dark mode lives. */ :root[data-theme="dark"] .app-topbar{ background:rgba(20,22,31,0.85); } :root[data-theme="dark"] .app-bottomnav{ background:rgba(29,32,48,0.92); } :root[data-theme="dark"] img, :root[data-theme="dark"] .app-avatar, :root[data-theme="dark"] .comm-member-info strong a{ filter:none; /* explicit no-op: avoids a future blanket "invert images" rule biting avatars/photos */ }