/* ========================================================================== Dark mode overrides — class-based (.dark on ) Strategy: remap light-mode Tailwind utilities under .dark so templates don't need dark: variants. System preference is respected unless the user overrides via the toggle (stored in localStorage). ========================================================================== */ /* --------------------------------------------------------------------------- 1. DISABLE prefers-color-scheme when .dark class is NOT present --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { html:not(.dark) { color-scheme: light !important; } } /* --------------------------------------------------------------------------- 2. Core scheme --------------------------------------------------------------------------- */ .dark { color-scheme: dark; } /* --------------------------------------------------------------------------- 3. Background colors --------------------------------------------------------------------------- */ /* Surfaces — elevation hierarchy: body(slate-950) < cards(slate-900) < raised(slate-800) */ .dark .bg-white { background-color: var(--color-slate-900); } .dark .bg-slate-50 { background-color: var(--color-slate-800); } .dark .bg-slate-100 { background-color: var(--color-slate-950); } .dark .bg-slate-200 { background-color: var(--color-slate-800); } .dark .bg-slate-300 { background-color: var(--color-slate-700); } .dark .bg-slate-400 { background-color: var(--color-slate-600); } .dark .bg-gray-50 { background-color: var(--color-slate-800); } .dark .bg-gray-100 { background-color: var(--color-slate-950); } .dark .bg-gray-200 { background-color: var(--color-slate-800); } .dark .bg-gray-300 { background-color: var(--color-slate-700); } /* Surface opacity variants */ .dark .bg-white\/50 { background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent); } .dark .bg-white\/70 { background-color: color-mix(in oklab, var(--color-slate-900) 70%, transparent); } .dark .bg-white\/80 { background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent); } .dark .bg-white\/90 { background-color: color-mix(in oklab, var(--color-slate-900) 90%, transparent); } .dark .bg-white\/10 { background-color: color-mix(in oklab, var(--color-white) 10%, transparent); } .dark .bg-slate-50\/70 { background-color: color-mix(in oklab, var(--color-slate-800) 70%, transparent); } .dark .bg-slate-50\/80 { background-color: color-mix(in oklab, var(--color-slate-800) 80%, transparent); } .dark .bg-slate-50\/50 { background-color: color-mix(in oklab, var(--color-slate-800) 50%, transparent); } .dark .bg-slate-50\/20 { background-color: color-mix(in oklab, var(--color-slate-800) 20%, transparent); } .dark .bg-slate-500\/20 { background-color: color-mix(in oklab, var(--color-slate-600) 20%, transparent); } .dark .bg-slate-500\/30 { background-color: color-mix(in oklab, var(--color-slate-600) 30%, transparent); } .dark .bg-slate-700\/30 { background-color: color-mix(in oklab, var(--color-slate-800) 30%, transparent); } /* Status badge surfaces — subtle tinted backgrounds */ .dark .bg-emerald-50 { background-color: color-mix(in oklab, var(--color-emerald-900) 30%, var(--color-slate-900)); } .dark .bg-emerald-100 { background-color: color-mix(in oklab, var(--color-emerald-900) 40%, var(--color-slate-900)); } .dark .bg-emerald-200 { background-color: color-mix(in oklab, var(--color-emerald-800) 40%, var(--color-slate-900)); } .dark .bg-emerald-50\/30 { background-color: color-mix(in oklab, var(--color-emerald-900) 20%, transparent); } .dark .bg-green-50 { background-color: color-mix(in oklab, var(--color-green-900) 30%, var(--color-slate-900)); } .dark .bg-green-100 { background-color: color-mix(in oklab, var(--color-green-900) 40%, var(--color-slate-900)); } .dark .bg-green-50\/30 { background-color: color-mix(in oklab, var(--color-green-900) 20%, transparent); } .dark .bg-green-50\/50 { background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent); } .dark .bg-amber-50 { background-color: color-mix(in oklab, var(--color-amber-900) 30%, var(--color-slate-900)); } .dark .bg-amber-100 { background-color: color-mix(in oklab, var(--color-amber-900) 40%, var(--color-slate-900)); } .dark .bg-amber-200 { background-color: color-mix(in oklab, var(--color-amber-800) 40%, var(--color-slate-900)); } .dark .bg-amber-50\/50 { background-color: color-mix(in oklab, var(--color-amber-900) 30%, transparent); } .dark .bg-yellow-50 { background-color: color-mix(in oklab, var(--color-yellow-900) 30%, var(--color-slate-900)); } .dark .bg-yellow-100 { background-color: color-mix(in oklab, var(--color-yellow-900) 40%, var(--color-slate-900)); } .dark .bg-red-50 { background-color: color-mix(in oklab, var(--color-red-900) 30%, var(--color-slate-900)); } .dark .bg-red-100 { background-color: color-mix(in oklab, var(--color-red-900) 40%, var(--color-slate-900)); } .dark .bg-red-200 { background-color: color-mix(in oklab, var(--color-red-800) 40%, var(--color-slate-900)); } .dark .bg-red-50\/50 { background-color: color-mix(in oklab, var(--color-red-900) 30%, transparent); } .dark .bg-red-50\/80 { background-color: color-mix(in oklab, var(--color-red-900) 40%, transparent); } .dark .bg-rose-50 { background-color: color-mix(in oklab, var(--color-rose-900) 30%, var(--color-slate-900)); } .dark .bg-rose-100 { background-color: color-mix(in oklab, var(--color-rose-900) 40%, var(--color-slate-900)); } .dark .bg-blue-50 { background-color: color-mix(in oklab, var(--color-blue-900) 30%, var(--color-slate-900)); } .dark .bg-blue-100 { background-color: color-mix(in oklab, var(--color-blue-900) 40%, var(--color-slate-900)); } .dark .bg-cyan-100 { background-color: color-mix(in oklab, var(--color-cyan-900) 40%, var(--color-slate-900)); } .dark .bg-indigo-50 { background-color: color-mix(in oklab, var(--color-indigo-900) 30%, var(--color-slate-900)); } .dark .bg-indigo-100 { background-color: color-mix(in oklab, var(--color-indigo-900) 40%, var(--color-slate-900)); } .dark .bg-indigo-200 { background-color: color-mix(in oklab, var(--color-indigo-800) 40%, var(--color-slate-900)); } .dark .bg-indigo-50\/40 { background-color: color-mix(in oklab, var(--color-indigo-900) 25%, transparent); } .dark .bg-indigo-50\/50 { background-color: color-mix(in oklab, var(--color-indigo-900) 30%, transparent); } .dark .bg-indigo-50\/70 { background-color: color-mix(in oklab, var(--color-indigo-900) 40%, transparent); } .dark .bg-indigo-500\/20 { background-color: color-mix(in oklab, var(--color-indigo-600) 20%, transparent); } .dark .bg-purple-50 { background-color: color-mix(in oklab, var(--color-purple-900) 30%, var(--color-slate-900)); } .dark .bg-purple-100 { background-color: color-mix(in oklab, var(--color-purple-900) 40%, var(--color-slate-900)); } .dark .bg-purple-200 { background-color: color-mix(in oklab, var(--color-purple-800) 40%, var(--color-slate-900)); } .dark .bg-orange-50 { background-color: color-mix(in oklab, var(--color-orange-900) 30%, var(--color-slate-900)); } .dark .bg-orange-100 { background-color: color-mix(in oklab, var(--color-orange-900) 40%, var(--color-slate-900)); } .dark .bg-lime-100 { background-color: color-mix(in oklab, var(--color-lime-900) 40%, var(--color-slate-900)); } /* Gradient endpoints */ .dark .from-white { --tw-gradient-from: var(--color-slate-900); } .dark .from-slate-50 { --tw-gradient-from: var(--color-slate-800); } .dark .from-slate-100 { --tw-gradient-from: var(--color-slate-950); } .dark .via-white { --tw-gradient-via: var(--color-slate-900); } .dark .via-slate-900 { --tw-gradient-via: var(--color-slate-950); } .dark .to-slate-50 { --tw-gradient-to: var(--color-slate-800); } .dark .to-slate-100 { --tw-gradient-to: var(--color-slate-950); } .dark .to-slate-800 { --tw-gradient-to: var(--color-slate-950); } /* Body background — darkest surface in the hierarchy */ .dark body, body.dark { background-color: var(--color-slate-950) !important; } /* --------------------------------------------------------------------------- 4. Text colors --------------------------------------------------------------------------- */ /* Slate scale inversion */ .dark .text-slate-900 { color: var(--color-slate-50); } .dark .text-slate-800 { color: var(--color-slate-200); } .dark .text-slate-700 { color: var(--color-slate-300); } .dark .text-slate-600 { color: var(--color-slate-400); } .dark .text-slate-500 { color: var(--color-slate-400); } .dark .text-slate-400 { color: var(--color-slate-500); } /* Gray scale */ .dark .text-gray-900 { color: var(--color-gray-100); } .dark .text-gray-800 { color: var(--color-gray-200); } .dark .text-gray-700 { color: var(--color-gray-300); } .dark .text-gray-600 { color: var(--color-gray-400); } .dark .text-gray-500 { color: var(--color-gray-400); } /* Status text — lighten for dark backgrounds */ .dark .text-emerald-900 { color: var(--color-emerald-300); } .dark .text-emerald-800 { color: var(--color-emerald-300); } .dark .text-emerald-700 { color: var(--color-emerald-400); } .dark .text-green-900 { color: var(--color-green-300); } .dark .text-green-800 { color: var(--color-green-300); } .dark .text-green-700 { color: var(--color-green-400); } .dark .text-amber-900 { color: var(--color-amber-300); } .dark .text-amber-800 { color: var(--color-amber-300); } .dark .text-amber-700 { color: var(--color-amber-400); } .dark .text-yellow-900 { color: var(--color-yellow-300); } .dark .text-yellow-800 { color: var(--color-yellow-300); } .dark .text-yellow-700 { color: var(--color-yellow-400); } .dark .text-orange-800 { color: var(--color-orange-300); } .dark .text-orange-700 { color: var(--color-orange-400); } .dark .text-red-900 { color: var(--color-red-300); } .dark .text-red-800 { color: var(--color-red-300); } .dark .text-red-700 { color: var(--color-red-400); } .dark .text-rose-900 { color: var(--color-rose-300); } .dark .text-rose-800 { color: var(--color-rose-300); } .dark .text-rose-700 { color: var(--color-rose-400); } .dark .text-blue-900 { color: var(--color-blue-300); } .dark .text-blue-800 { color: var(--color-blue-300); } .dark .text-blue-700 { color: var(--color-blue-400); } .dark .text-sky-900 { color: var(--color-sky-300); } .dark .text-sky-800 { color: var(--color-sky-300); } .dark .text-sky-700 { color: var(--color-sky-400); } .dark .text-indigo-900 { color: var(--color-indigo-300); } .dark .text-indigo-800 { color: var(--color-indigo-300); } .dark .text-indigo-700 { color: var(--color-indigo-400); } .dark .text-indigo-600 { color: var(--color-indigo-400); } .dark .text-purple-900 { color: var(--color-purple-300); } .dark .text-purple-800 { color: var(--color-purple-300); } .dark .text-purple-700 { color: var(--color-purple-400); } .dark .text-violet-700 { color: var(--color-violet-400); } .dark .text-teal-800 { color: var(--color-teal-300); } .dark .text-teal-700 { color: var(--color-teal-400); } /* --------------------------------------------------------------------------- 5. Border colors --------------------------------------------------------------------------- */ .dark .border-slate-100 { border-color: var(--color-slate-800); } .dark .border-slate-200 { border-color: var(--color-slate-700); } .dark .border-slate-300 { border-color: var(--color-slate-600); } .dark .border-slate-400 { border-color: var(--color-slate-600); } .dark .border-slate-500 { border-color: var(--color-slate-500); } .dark .border-slate-600 { border-color: var(--color-slate-500); } .dark .border-slate-700 { border-color: var(--color-slate-600); } .dark .border-slate-900 { border-color: var(--color-slate-700); } .dark .border-gray-100 { border-color: var(--color-gray-800); } .dark .border-gray-200 { border-color: var(--color-gray-700); } .dark .border-gray-300 { border-color: var(--color-gray-600); } /* Opacity border variants */ .dark .border-slate-200\/70 { border-color: color-mix(in oklab, var(--color-slate-700) 70%, transparent); } .dark .border-slate-300\/70 { border-color: color-mix(in oklab, var(--color-slate-600) 70%, transparent); } .dark .border-slate-300\/80 { border-color: color-mix(in oklab, var(--color-slate-600) 80%, transparent); } .dark .border-slate-900\/30 { border-color: color-mix(in oklab, var(--color-slate-400) 30%, transparent); } /* Status borders */ .dark .border-emerald-200 { border-color: var(--color-emerald-700); } .dark .border-emerald-300 { border-color: var(--color-emerald-700); } .dark .border-green-200 { border-color: var(--color-green-700); } .dark .border-green-300 { border-color: var(--color-green-700); } .dark .border-amber-200 { border-color: var(--color-amber-700); } .dark .border-amber-300 { border-color: var(--color-amber-700); } .dark .border-yellow-200 { border-color: var(--color-yellow-700); } .dark .border-yellow-300 { border-color: var(--color-yellow-700); } .dark .border-red-200 { border-color: var(--color-red-700); } .dark .border-red-300 { border-color: var(--color-red-700); } .dark .border-rose-200 { border-color: var(--color-rose-700); } .dark .border-blue-200 { border-color: var(--color-blue-700); } .dark .border-indigo-200 { border-color: var(--color-indigo-700); } .dark .border-indigo-300 { border-color: var(--color-indigo-700); } .dark .border-purple-200 { border-color: var(--color-purple-700); } /* --------------------------------------------------------------------------- 6. Ring colors --------------------------------------------------------------------------- */ .dark .ring-slate-300\/40 { --tw-ring-color: color-mix(in oklab, var(--color-slate-600) 40%, transparent); } .dark .ring-slate-400\/30 { --tw-ring-color: color-mix(in oklab, var(--color-slate-600) 30%, transparent); } .dark .ring-slate-500\/40 { --tw-ring-color: color-mix(in oklab, var(--color-slate-500) 40%, transparent); } .dark .ring-slate-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-slate-500) 20%, transparent); } .dark .ring-slate-600\/10 { --tw-ring-color: color-mix(in oklab, var(--color-slate-500) 20%, transparent); } /* Status ring colors */ .dark .ring-emerald-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-emerald-400) 30%, transparent); } .dark .ring-green-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-green-400) 30%, transparent); } .dark .ring-amber-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-amber-400) 30%, transparent); } .dark .ring-yellow-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-yellow-400) 30%, transparent); } .dark .ring-red-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-red-400) 30%, transparent); } .dark .ring-blue-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-blue-400) 30%, transparent); } .dark .ring-indigo-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-indigo-400) 30%, transparent); } .dark .ring-purple-600\/20 { --tw-ring-color: color-mix(in oklab, var(--color-purple-400) 30%, transparent); } /* --------------------------------------------------------------------------- 7. Shadow colors --------------------------------------------------------------------------- */ .dark .shadow-sm { --tw-shadow-color: #0006; } .dark .shadow { --tw-shadow-color: #0006; } .dark .shadow-md { --tw-shadow-color: #0006; } .dark .shadow-lg { --tw-shadow-color: #0006; } .dark .shadow-xl { --tw-shadow-color: #0006; } /* --------------------------------------------------------------------------- 8. Dividers --------------------------------------------------------------------------- */ .dark .divide-slate-100 > :not(:last-child) { border-color: var(--color-slate-800); } .dark .divide-slate-200 > :not(:last-child) { border-color: var(--color-slate-700); } .dark .divide-slate-200\/70 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-slate-700) 70%, transparent); } .dark .divide-slate-300 > :not(:last-child) { border-color: var(--color-slate-600); } .dark .divide-slate-700 > :not(:last-child) { border-color: var(--color-slate-600); } .dark .divide-slate-800\/50 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent); } .dark .divide-slate-800\/60 > :not(:last-child) { border-color: color-mix(in oklab, var(--color-slate-700) 60%, transparent); } .dark .divide-gray-200 > :not(:last-child) { border-color: var(--color-gray-700); } /* --------------------------------------------------------------------------- 9. Hover states --------------------------------------------------------------------------- */ .dark .hover\:bg-slate-50:hover { background-color: var(--color-slate-800); } .dark .hover\:bg-slate-100:hover { background-color: var(--color-slate-800); } .dark .hover\:bg-slate-200:hover { background-color: var(--color-slate-700); } .dark .hover\:bg-gray-50:hover { background-color: var(--color-slate-800); } .dark .hover\:bg-gray-100:hover { background-color: var(--color-slate-800); } .dark .hover\:bg-white:hover { background-color: var(--color-slate-800); } .dark .hover\:bg-slate-50\/50:hover { background-color: color-mix(in oklab, var(--color-slate-700) 50%, transparent); } .dark .hover\:bg-slate-50\/70:hover { background-color: color-mix(in oklab, var(--color-slate-700) 70%, transparent); } .dark .hover\:text-slate-700:hover { color: var(--color-slate-300); } .dark .hover\:text-slate-800:hover { color: var(--color-slate-200); } .dark .hover\:text-slate-900:hover { color: var(--color-slate-100); } .dark .hover\:border-slate-300:hover { border-color: var(--color-slate-500); } .dark .hover\:border-slate-400:hover { border-color: var(--color-slate-500); } /* --------------------------------------------------------------------------- 10. Focus states (form inputs) --------------------------------------------------------------------------- */ .dark .focus\:border-indigo-300:focus { border-color: var(--color-indigo-500); } .dark .focus\:border-indigo-500:focus { border-color: var(--color-indigo-400); } .dark .focus\:ring-indigo-500:focus { --tw-ring-color: var(--color-indigo-500); } .dark .focus\:ring-indigo-500\/40:focus { --tw-ring-color: color-mix(in oklab, var(--color-indigo-500) 40%, transparent); } /* --------------------------------------------------------------------------- 11. Placeholder text --------------------------------------------------------------------------- */ .dark .placeholder\:text-slate-400::placeholder { color: var(--color-slate-500); } .dark .placeholder\:text-gray-400::placeholder { color: var(--color-gray-500); } /* --------------------------------------------------------------------------- 12. Stripe/zebra table rows --------------------------------------------------------------------------- */ .dark .even\:bg-slate-50:nth-child(even) { background-color: var(--color-slate-800); } .dark .odd\:bg-white:nth-child(odd) { background-color: var(--color-slate-900); } .dark .even\:bg-gray-50:nth-child(even) { background-color: var(--color-slate-800); } /* --------------------------------------------------------------------------- 13. Scrollbar (WebKit) --------------------------------------------------------------------------- */ .dark ::-webkit-scrollbar-track { background: var(--color-slate-900); } .dark ::-webkit-scrollbar-thumb { background: var(--color-slate-700); } .dark ::-webkit-scrollbar-thumb:hover { background: var(--color-slate-600); }