/* * CenterOS Dark Theme * --------------------------------------------------------------------------- * The application's Tailwind CSS (styles.css) is pre-compiled WITHOUT the * `dark:` variant, so toggling a `dark` class on has no effect on its * own. This file provides an explicit, hand-maintained dark palette scoped * under `.dark` (applied to ) that re-skins the utility classes actually * used across the app's surfaces: page background, cards, navbar, sidebar, * text, borders, inputs, badges and flash messages. * * It is loaded after styles.css in base.html so these rules win on specificity * tie (later source order) — most selectors are bumped to `html.dark ...` to * stay ahead of Tailwind's single-class utilities. */ /* ---- Root surfaces ------------------------------------------------------ */ html.dark, html.dark body { background-color: #0f172a; /* slate-900 */ color: #e2e8f0; /* slate-200 */ } html.dark .bg-gray-100 { background-color: #0f172a; /* slate-900 */ } html.dark .bg-gray-50 { background-color: #1e293b; /* slate-800 */ } /* Cards / panels / dropdowns ------------------------------------------------ */ html.dark .bg-white { background-color: #1e293b; /* slate-800 */ color: #e2e8f0; } html.dark .shadow, html.dark .shadow-sm, html.dark .shadow-lg { --tw-shadow-color: rgba(0, 0, 0, 0.6); } /* ---- Text colours ------------------------------------------------------- */ html.dark .text-gray-900 { color: #f1f5f9; /* slate-100 */ } html.dark .text-gray-800 { color: #e2e8f0; /* slate-200 */ } html.dark .text-gray-700 { color: #cbd5e1; /* slate-300 */ } html.dark .text-gray-600, html.dark .text-gray-500 { color: #94a3b8; /* slate-400 */ } html.dark .text-gray-400 { color: #64748b; /* slate-500 */ } html.dark .text-black { color: #f1f5f9; } /* ---- Borders / rings ---------------------------------------------------- */ html.dark .border-gray-100, html.dark .border-gray-200 { border-color: #334155; /* slate-700 */ } html.dark .border-gray-300 { border-color: #475569; /* slate-600 */ } html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155; } html.dark .ring-gray-300 { --tw-ring-color: #475569; } html.dark .ring-black { --tw-ring-color: rgba(0, 0, 0, 0.5); } /* ---- Hover states ------------------------------------------------------- */ html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-50:hover { background-color: #334155; /* slate-700 */ } html.dark .hover\:text-gray-500:hover, html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-gray-900:hover { color: #f1f5f9; } /* ---- Form controls ------------------------------------------------------ */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a; color: #e2e8f0; border-color: #475569; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } /* ---- Tables ------------------------------------------------------------- */ html.dark table thead, html.dark .bg-gray-50.table-head { background-color: #1e293b; } html.dark tbody tr:hover { background-color: #273449; } /* ---- Tinted badge / message backgrounds --------------------------------- */ html.dark .bg-blue-50 { background-color: #1e3a5f; } html.dark .bg-green-50 { background-color: #14352a; } html.dark .bg-red-50 { background-color: #3b1d23; } html.dark .bg-yellow-50 { background-color: #3a3416; } html.dark .bg-gray-100.badge, html.dark .bg-purple-100 { background-color: #2e2447; } html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-green-800 { color: #86efac; } html.dark .text-red-800, html.dark .text-red-600 { color: #fca5a5; } html.dark .text-yellow-800 { color: #fde68a; } html.dark .text-purple-800 { color: #c4b5fd; } /* ---- Modal / overlay ---------------------------------------------------- */ html.dark .bg-gray-600, html.dark .bg-gray-500 { background-color: #0b1220; } /* ---- Icon-rail sidebar (CEN-245) ---------------------------------------- */ html.dark .nav-rail .nav-section { border-top-color: #334155; /* slate-700 */ } html.dark #nav-rail-tooltip { background-color: #0b1220; color: #e2e8f0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7); }