/* * dark.css — site-wide dark theme applied when . * * The app is built almost entirely from Tailwind utility classes, and the * production CSS is compiled on the server (locally we fall back to the CDN). * To avoid depending on `dark:` variants being compiled into every build, we * override the handful of utility classes the UI actually uses. `html.dark .x` * (specificity 0,2,0) beats the base `.x` (0,1,0); !important guards the rest. */ html.dark { color-scheme: dark; } html.dark body { background-color: #0f172a; color: #e2e8f0; } /* Surfaces ---------------------------------------------------------------- */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-gray-50 { background-color: #172033 !important; } html.dark .bg-gray-100 { background-color: #0f172a !important; } html.dark .bg-white\/95 { background-color: rgba(30, 41, 59, 0.95) !important; } html.dark .bg-blue-50 { background-color: #16243b !important; } html.dark .bg-blue-100 { background-color: #1e3a5f !important; } html.dark .bg-blue-50\/50 { background-color: rgba(22, 36, 59, 0.6) !important; } /* Accent tints used by tool/hub icon chips (and panels) */ html.dark .bg-indigo-50 { background-color: #1e2348 !important; } html.dark .bg-green-50 { background-color: #10291f !important; } html.dark .bg-pink-50 { background-color: #2e1722 !important; } html.dark .bg-amber-50 { background-color: #2e2410 !important; } html.dark .text-indigo-600 { color: #a5b4fc !important; } html.dark .text-green-600 { color: #4ade80 !important; } html.dark .text-pink-600 { color: #f472b6 !important; } html.dark .text-amber-600 { color: #fbbf24 !important; } /* "Soon" chip: make it distinct from the page background */ html.dark .bg-gray-100.text-gray-400 { background-color: #28324a !important; } /* Text -------------------------------------------------------------------- */ html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #e5ecf5 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #a8b3c4 !important; } html.dark .text-gray-500 { color: #94a3b8 !important; } html.dark .text-gray-400 { color: #7c8aa0 !important; } html.dark .text-gray-300 { color: #64748b !important; } html.dark .text-blue-900, html.dark .text-blue-800, html.dark .text-blue-700 { color: #93c5fd !important; } html.dark .text-blue-600 { color: #7eb6ff !important; } /* Borders ----------------------------------------------------------------- */ html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300, html.dark .border-blue-100 { border-color: #334155 !important; } html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* Form controls ----------------------------------------------------------- */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* Dropzone & cards -------------------------------------------------------- */ html.dark #dropzone { background-color: #172033 !important; border-color: #3b5680 !important; } html.dark .shadow-lg, html.dark .shadow, html.dark .shadow-sm { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45) !important; } /* Theme-toggle icon visibility ------------------------------------------- */ .theme-icon-dark { display: none; } html.dark .theme-icon-dark { display: inline-block; } html.dark .theme-icon-light { display: none; }