/** * Dark-mode structural fallback styles for cyph0r pages. * * These rules guarantee dark-mode colours are applied as soon as * theme.js adds the `dark` class to , even before the Tailwind * CDN script has finished processing the page. The colour values * intentionally match Tailwind's dark: variant equivalents so there * is no visual difference when the CDN is working normally. */ /* ── Base ────────────────────────────────────────────────────────── */ .dark { color-scheme: dark; } /* ── Page structure ──────────────────────────────────────────────── */ .dark body { background-color: #0f172a !important; /* slate-900 */ color: #f1f5f9 !important; /* slate-100 */ } .dark header.bg-white, .dark header.bg-slate-50, .dark header.bg-slate-100 { background-color: rgba(30, 41, 59, 0.95) !important; /* slate-800/95 */ border-color: #334155 !important; /* slate-700 */ } .dark footer { background-color: #1e293b !important; /* slate-800 */ border-color: #334155 !important; /* slate-700 */ } /* ── Common light backgrounds ────────────────────────────────────── */ .dark .bg-white { background-color: #1e293b !important; /* slate-800 */ } .dark .bg-slate-50 { background-color: #0f172a !important; /* slate-900 */ } .dark .bg-slate-100 { background-color: #1e293b !important; /* slate-800 */ } /* ── Headings ────────────────────────────────────────────────────── */ .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #ffffff !important; } /* ── Tables ──────────────────────────────────────────────────────── */ .dark table { border-color: #334155 !important; /* slate-700 */ } .dark th { background-color: #1e293b !important; /* slate-800 */ color: #f1f5f9 !important; border-color: #334155 !important; } .dark td { border-color: #334155 !important; /* slate-700 */ color: #e2e8f0 !important; /* slate-200 */ } /* ── Borders ─────────────────────────────────────────────────────── */ .dark .border-slate-200 { border-color: #334155 !important; /* slate-700 */ } .dark .divide-y > * { border-color: #334155 !important; /* slate-700 */ } /* ── Coloured alert / info boxes ─────────────────────────────────── */ .dark .bg-blue-50 { background-color: rgba(23, 37, 84, 0.3) !important; } .dark .bg-green-50 { background-color: rgba(6, 78, 59, 0.3) !important; } .dark .bg-red-50 { background-color: rgba(69, 10, 10, 0.3) !important; } .dark .bg-yellow-50, .dark .bg-amber-50 { background-color: rgba(69, 26, 3, 0.3) !important; } .dark .bg-purple-50 { background-color: rgba(59, 7, 100, 0.3) !important; } /* ── Brand accent remap: red -> electric blue ─────────────────────── */ [class*="text-red-"] { color: #007bff !important; } [class*="bg-red-50"] { background-color: #e8f4ff !important; } [class*="bg-red-100"] { background-color: #dbeeff !important; } [class*="bg-red-600"] { background-color: #009dff !important; } [class*="bg-red-700"] { background-color: #007bff !important; } [class*="border-red-"] { border-color: #93c5fd !important; } [class*="ring-red-"], [class*="focus:ring-red-"], [class*="focus:border-red-"] { --tw-ring-color: #38bdf8 !important; border-color: #38bdf8 !important; } .dark [class*="bg-red-50"], .dark [class*="bg-red-950"] { background-color: rgba(3, 37, 76, 0.35) !important; } .dark [class*="border-red-"] { border-color: #1d4ed8 !important; } .dark [class*="text-red-"] { color: #38bdf8 !important; } /* ── Scrollbars ──────────────────────────────────────────────────── */ .dark ::-webkit-scrollbar { background-color: #1e293b; } .dark ::-webkit-scrollbar-thumb { background-color: #475569; border-radius: 4px; } .dark ::-webkit-scrollbar-thumb:hover { background-color: #64748b; }