/* Slotly Dark Mode * * This project uses Tailwind via CDN in templates, so we provide a small CSS * layer to make dark mode work across the dashboard without duplicating * hundreds of `dark:` utility classes. * * Dark mode is enabled by adding the `dark` class on . */ html.dark { color-scheme: dark; } html.dark body { background: #020617; /* slate-950 */ color: #e2e8f0; /* slate-200 */ } /* Surfaces */ html.dark .bg-white { background-color: #0f172a !important; /* slate-900 */ } html.dark .bg-gray-50 { background-color: #020617 !important; /* slate-950 */ } html.dark .bg-gray-100 { background-color: rgba(148, 163, 184, 0.08) !important; /* slate-400 @ 8% */ } /* Accent surfaces (info banners) */ html.dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.10) !important; /* blue-500 @ 10% */ } /* Text */ html.dark .text-gray-900 { color: #f1f5f9 !important; } /* slate-100 */ html.dark .text-gray-800 { color: #e2e8f0 !important; } /* slate-200 */ html.dark .text-gray-700 { color: #e2e8f0 !important; } /* slate-200 */ html.dark .text-gray-600 { color: #cbd5e1 !important; } /* slate-300 */ html.dark .text-gray-500 { color: #94a3b8 !important; } /* slate-400 */ html.dark .text-gray-400 { color: #64748b !important; } /* slate-500 */ html.dark .text-blue-800 { color: #bfdbfe !important; } /* blue-200 */ /* Borders */ html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: #1f2937 !important; /* gray-800 */ } html.dark .border-blue-200 { border-color: rgba(59, 130, 246, 0.35) !important; /* blue-500 @ 35% */ } /* Divide utilities (tables/lists) */ html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #1f2937 !important; /* gray-800 */ } /* Hover helpers commonly used in templates */ html.dark .hover\:bg-gray-50:hover { background-color: rgba(148, 163, 184, 0.10) !important; } html.dark .hover\:bg-gray-100:hover { background-color: rgba(148, 163, 184, 0.14) !important; } /* Inputs */ html.dark input, html.dark select, html.dark textarea { color: #e2e8f0; } html.dark input::placeholder, html.dark textarea::placeholder { color: #94a3b8; } html.dark input[disabled], html.dark textarea[disabled], html.dark select[disabled] { opacity: 0.75; }