/* site-dark.css * Site-wide dark mode for pages extending base.html (home, review, * My Progress, analytics). Activated by the `act-dark` class on * — the same class and localStorage key (act_dark_mode) the * test interface uses, so the preference follows the user everywhere. * Printable reports are standalone and intentionally stay light. * * Strategy: override the small set of light Tailwind utilities the * templates actually use, rather than restyling components. */ /* --- Page + surfaces -------------------------------------------------- */ html.act-dark body { background-color: #0f172a; color: #e5e7eb; } html.act-dark .bg-gray-100 { background-color: #0f172a !important; } html.act-dark .bg-white { background-color: #1f2937 !important; } html.act-dark .bg-gray-50 { background-color: #182234 !important; } html.act-dark .bg-gray-800 { background-color: #030712 !important; } /* --- Text ------------------------------------------------------------- */ html.act-dark .text-gray-900, html.act-dark .text-gray-800 { color: #f3f4f6 !important; } html.act-dark .text-gray-700 { color: #d1d5db !important; } html.act-dark .text-gray-600, html.act-dark .text-gray-500 { color: #9ca3af !important; } html.act-dark .text-gray-400 { color: #6b7280 !important; } html.act-dark h1, html.act-dark h2, html.act-dark h3 { color: #f3f4f6; } /* --- Borders / dividers ---------------------------------------------- */ html.act-dark .border, html.act-dark .border-b, html.act-dark .border-t, html.act-dark .border-l, html.act-dark .border-r, html.act-dark .border-gray-200, html.act-dark .border-gray-300 { border-color: #334155 !important; } html.act-dark .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* --- Hovers ----------------------------------------------------------- */ html.act-dark .hover\:bg-gray-50:hover, html.act-dark .hover\:bg-gray-100:hover { background-color: #273449 !important; } html.act-dark .hover\:bg-gray-200:hover { background-color: #334155 !important; } /* --- Tinted panels (info/warn/error cards) ---------------------------- */ html.act-dark .bg-blue-50 { background-color: #172554 !important; } html.act-dark .bg-red-50 { background-color: #3f1d1d !important; } html.act-dark .bg-yellow-50 { background-color: #3a2c10 !important; } html.act-dark .bg-green-50 { background-color: #132e1f !important; } html.act-dark .bg-purple-50 { background-color: #2a1d52 !important; } html.act-dark .bg-orange-50 { background-color: #3c2312 !important; } /* Badge chips: darken bg-*-100, lighten their text-*-800 pairs */ html.act-dark .bg-blue-100 { background-color: #1e3a8a !important; } html.act-dark .bg-red-100 { background-color: #7f1d1d !important; } html.act-dark .bg-yellow-100 { background-color: #713f12 !important; } html.act-dark .bg-green-100 { background-color: #14532d !important; } html.act-dark .bg-purple-100 { background-color: #4c1d95 !important; } html.act-dark .bg-gray-100.text-gray-600, html.act-dark span.bg-gray-100 { background-color: #374151 !important; } html.act-dark .text-blue-800, html.act-dark .text-blue-700 { color: #93c5fd !important; } html.act-dark .text-red-800, html.act-dark .text-red-700 { color: #fca5a5 !important; } html.act-dark .text-yellow-800, html.act-dark .text-yellow-700 { color: #fde68a !important; } html.act-dark .text-green-800, html.act-dark .text-green-700 { color: #86efac !important; } html.act-dark .text-purple-800, html.act-dark .text-purple-700 { color: #d8b4fe !important; } html.act-dark .text-orange-800, html.act-dark .text-orange-600 { color: #fdba74 !important; } html.act-dark .text-blue-600 { color: #60a5fa !important; } html.act-dark .text-red-600 { color: #f87171 !important; } html.act-dark .text-green-600 { color: #4ade80 !important; } /* --- Form controls ---------------------------------------------------- */ html.act-dark input[type="text"], html.act-dark input[type="search"], html.act-dark input[type="password"], html.act-dark input[type="number"], html.act-dark input[type="email"], html.act-dark select, html.act-dark textarea { background-color: #111827; color: #e5e7eb; border-color: #374151; } html.act-dark input::placeholder { color: #6b7280; } /* --- Tables ------------------------------------------------------------ */ html.act-dark table thead th { color: #9ca3af; } html.act-dark table td, html.act-dark table th { border-color: #334155; } /* --- Shadows read as edges in the dark -------------------------------- */ html.act-dark .shadow, html.act-dark .shadow-lg { box-shadow: 0 0 0 1px #334155 !important; }