/* * M13 dark mode. * * The templates are written with plain light-mode Tailwind classes * (bg-white, text-slate-700, ...). Rather than adding a `dark:` twin to * every one of them, this file re-colours those same classes whenever * has the `dark` class (set by templates/_theme_head.html). The * `html.dark` prefix makes every rule here more specific than Tailwind's * own, so load order doesn't matter. * * Adding a new colour class to a template? Give it a dark version here too. * core/tests.py (DarkModeCoverageTests) fails if one is missing. */ /* ---------- things that apply in both themes ---------- */ /* Logos: each comes in a light and a dark copy; show one. */ html.dark .logo-on-light, html:not(.dark) .logo-on-dark { display: none !important; } /* Toggle icon matches the current setting. */ .theme-toggle svg { display: none; } html[data-theme="auto"] .theme-toggle .theme-icon-auto, html[data-theme="light"] .theme-toggle .theme-icon-light, html[data-theme="dark"] .theme-toggle .theme-icon-dark, html:not([data-theme]) .theme-toggle .theme-icon-auto { display: block; } /* ---------- dark ---------- */ html.dark { color-scheme: dark; /* dark scrollbars, date pickers, dropdown menus */ } /* Page + surfaces */ html.dark.bg-slate-50 { background-color: #020617; } html.dark .bg-white { background-color: #0f172a; } html.dark .bg-slate-50 { background-color: #0b1222; } html.dark .bg-slate-100 { background-color: #1e293b; } html.dark .hover\:bg-slate-50:hover { background-color: #1e293b; } html.dark .hover\:bg-slate-100:hover { background-color: #1e293b; } html.dark .hover\:bg-slate-200:hover { background-color: #334155; } /* Primary buttons: dark-on-light becomes light-on-dark */ html.dark .bg-slate-900 { background-color: #e2e8f0; } html.dark .bg-slate-900.text-white { color: #0f172a; } html.dark .hover\:bg-slate-700:hover { background-color: #cbd5e1; } /* Text */ html.dark .text-slate-900 { color: #f1f5f9; } html.dark .text-slate-800 { color: #e2e8f0; } html.dark .text-slate-700 { color: #cbd5e1; } html.dark .text-slate-600 { color: #b4c0d0; } html.dark .text-slate-500 { color: #94a3b8; } html.dark .text-slate-400 { color: #7d8ba1; } html.dark .hover\:text-slate-900:hover { color: #ffffff; } html.dark .hover\:text-slate-700:hover { color: #e2e8f0; } html.dark .hover\:text-slate-600:hover { color: #cbd5e1; } /* Borders + dividers */ html.dark .border-slate-100 { border-color: #172033; } html.dark .border-slate-200 { border-color: #253247; } html.dark .border-slate-300 { border-color: #334155; } html.dark .hover\:border-slate-300:hover { border-color: #475569; } html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #172033; } html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #253247; } /* Focus rings on form fields */ html.dark .focus\:border-slate-500:focus { border-color: #94a3b8; } html.dark .focus\:ring-slate-500:focus { --tw-ring-color: #94a3b8; } html.dark .focus\:ring-slate-400:focus { --tw-ring-color: #64748b; } /* Form fields (no bg class in the templates: the browser default is white) */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), html.dark select, html.dark textarea { background-color: #0b1222; color: #f1f5f9; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } html.dark input:disabled, html.dark select:disabled, html.dark textarea:disabled { background-color: #1e293b; color: #94a3b8; } /* Coloured notices, badges and tints: soft tint + light text */ html.dark .bg-red-50 { background-color: rgb(239 68 68 / 0.10); } html.dark .bg-red-100 { background-color: rgb(239 68 68 / 0.20); } html.dark .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / 0.16); } html.dark .border-red-200 { border-color: rgb(239 68 68 / 0.35); } html.dark .border-red-300 { border-color: rgb(239 68 68 / 0.50); } html.dark .text-red-600 { color: #f87171; } html.dark .text-red-700 { color: #fca5a5; } html.dark .text-red-800 { color: #fca5a5; } html.dark .bg-amber-50 { background-color: rgb(245 158 11 / 0.10); } html.dark .bg-amber-50\/60 { background-color: rgb(245 158 11 / 0.07); } html.dark .bg-amber-100 { background-color: rgb(245 158 11 / 0.20); } html.dark .hover\:bg-amber-100:hover { background-color: rgb(245 158 11 / 0.22); } html.dark .border-amber-200 { border-color: rgb(245 158 11 / 0.35); } html.dark .border-amber-300 { border-color: rgb(245 158 11 / 0.50); } html.dark .text-amber-800 { color: #fcd34d; } html.dark .text-amber-900 { color: #fde68a; } html.dark .bg-orange-50 { background-color: rgb(249 115 22 / 0.10); } html.dark .bg-orange-100 { background-color: rgb(249 115 22 / 0.20); } html.dark .border-orange-200 { border-color: rgb(249 115 22 / 0.35); } html.dark .text-orange-700 { color: #fdba74; } html.dark .text-orange-800 { color: #fdba74; } html.dark .bg-emerald-50 { background-color: rgb(16 185 129 / 0.10); } html.dark .bg-emerald-100 { background-color: rgb(16 185 129 / 0.20); } html.dark .border-emerald-200 { border-color: rgb(16 185 129 / 0.35); } html.dark .text-emerald-700 { color: #6ee7b7; } html.dark .text-emerald-800 { color: #6ee7b7; } html.dark .ring-emerald-300 { --tw-ring-color: rgb(16 185 129 / 0.6); } html.dark .bg-sky-100 { background-color: rgb(14 165 233 / 0.20); } html.dark .text-sky-800 { color: #7dd3fc; } html.dark .bg-violet-100 { background-color: rgb(139 92 246 / 0.22); } html.dark .text-violet-800 { color: #c4b5fd; } /* Solid colour buttons (bg-red-600, bg-emerald-600, bg-sky-600 + white text) already read well on dark, so they're left alone -- listed here so the coverage test knows they were looked at: bg-red-600 hover:bg-red-700 bg-emerald-600 hover:bg-emerald-700 bg-sky-600 hover:bg-sky-700 text-white */