/* prpl — dark mode overrides. * * The console redesign supports a class-based dark mode (Tailwind * `darkMode: 'class'`). The toggle in the header adds `class="dark"` * to and persists the choice in localStorage('prpl.theme'). * * Rather than re-style every template for dark, we apply targeted * `html.dark .bg-stone-50 { ... }` overrides over the most-used * Tailwind utility classes so a light-themed page renders dark with * no per-template changes. Same approach as the prototype. */ html.dark { color-scheme: dark; background: #0c0a09; } html.dark body { background: #0c0a09; color: #d6d3d1; } /* Flip the design tokens defined in colors_and_type.css. The variables * are read by /static/style.css (.panel, .status-bar, .filters, body.app-page table) * so flipping them here re-themes the whole legacy class set with no * per-rule overrides. */ html.dark { --bg-page: #0c0a09; /* page bg → stone-950 */ --bg-surface: #1c1917; /* cards → stone-900 */ --bg-surface-2: rgba(28, 25, 23, 0.50); --bg-surface-3: rgba(28, 25, 23, 0.60); --bg-sunken: #292524; /* code chip bg → stone-800 */ /* --bg-header intentionally not overridden: the header is permanent * console ink chrome in both themes (see colors_and_type.css). */ --border-default: #292524; /* stone-800 */ --border-strong: #44403c; /* stone-700 */ --border-faint: rgba(28, 25, 23, 0.6); --fg-default: #f5f5f4; /* body strong */ --fg-muted: #a8a29e; /* body muted */ --fg-subtle: #78716c; /* eyebrow */ --fg-faint: #57534e; /* divider dots */ --fg-heading: #fafaf9; /* h1 */ --fg-heading-2: #f5f5f4; /* h2 */ --grid-line: rgba(120, 113, 108, 0.25); } /* The body.app-page rules in style.css set the color directly to * var(--stone-800). Bump that to the heading color in dark so body * text remains legible after the token flip. */ html.dark body.app-page { color: var(--fg-default); } html.dark body.app-page h1 { color: var(--fg-heading); } html.dark body.app-page h2 { color: var(--fg-subtle); } html.dark body.app-page th { background: rgba(28, 25, 23, 0.50); } html.dark body.app-page tr:hover td { background: rgba(28, 25, 23, 0.40); } /* Surfaces */ html.dark .bg-paper { background-color: #0c0a09 !important; } html.dark .bg-stone-50 { background-color: #0c0a09 !important; } html.dark .bg-stone-50\/60 { background-color: rgba(12,10,9,0.6) !important; } html.dark .bg-stone-50\/80 { background-color: rgba(12,10,9,0.78) !important; } html.dark .bg-stone-100 { background-color: #292524 !important; } html.dark .bg-stone-100\/40 { background-color: rgba(0,0,0,0.28) !important; } html.dark .bg-stone-100\/50 { background-color: rgba(0,0,0,0.30) !important; } html.dark .bg-stone-100\/60 { background-color: rgba(0,0,0,0.35) !important; } html.dark .bg-stone-100\/80 { background-color: rgba(0,0,0,0.40) !important; } html.dark .bg-white { background-color: #1c1917 !important; } html.dark .bg-white\/80 { background-color: rgba(28,25,23,0.80) !important; } html.dark .bg-white\/85 { background-color: rgba(28,25,23,0.82) !important; } /* Borders */ html.dark .border-stone-100 { border-color: rgba(28,25,23,0.6) !important; } html.dark .border-stone-200 { border-color: #292524 !important; } html.dark .border-stone-300 { border-color: #44403c !important; } /* Text — invert the stone scale so headings stay legible */ html.dark .text-stone-900 { color: #fafaf9 !important; } html.dark .text-stone-800 { color: #f5f5f4 !important; } html.dark .text-stone-700 { color: #e7e5e4 !important; } html.dark .text-stone-600 { color: #d6d3d1 !important; } html.dark .text-stone-500 { color: #a8a29e !important; } html.dark .text-stone-400 { color: #78716c !important; } html.dark .text-stone-300 { color: #57534e !important; } /* CTAs — stone-900 becomes a light pill on dark */ html.dark button.bg-stone-900, html.dark a.bg-stone-900 { background-color: #fafaf9 !important; color: #1c1917 !important; } html.dark button.hover\:bg-stone-800:hover, html.dark a.hover\:bg-stone-800:hover { background-color: #e7e5e4 !important; color: #1c1917 !important; } /* Hover surfaces */ html.dark .hover\:bg-stone-50:hover, html.dark .hover\:bg-stone-50\/60:hover { background-color: rgba(255,255,255,0.03) !important; } html.dark .hover\:bg-stone-100:hover, html.dark .hover\:bg-stone-100\/50:hover, html.dark .hover\:bg-stone-100\/60:hover { background-color: rgba(255,255,255,0.04) !important; } html.dark .hover\:border-stone-300:hover { border-color: #57534e !important; } html.dark .hover\:border-stone-400:hover { border-color: #57534e !important; } html.dark .hover\:text-stone-900:hover { color: #fafaf9 !important; } html.dark .hover\:text-stone-800:hover { color: #fafaf9 !important; } html.dark .hover\:text-stone-700:hover { color: #d6d3d1 !important; } /* Tinted accents — keep the brand color signal at lower alpha */ html.dark .bg-rose-50 { background-color: rgba(244,63,94,0.10) !important; } html.dark .bg-sky-50 { background-color: rgba(14,165,233,0.10) !important; } html.dark .bg-violet-50 { background-color: rgba(139,92,246,0.10) !important; } html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.10) !important; } html.dark .bg-amber-50 { background-color: rgba(251,191,36,0.10) !important; } html.dark .text-rose-700 { color: #fda4af !important; } html.dark .text-rose-600 { color: #fb7185 !important; } html.dark .text-rose-500 { color: #fda4af !important; } html.dark .text-sky-700 { color: #7dd3fc !important; } html.dark .text-sky-600 { color: #38bdf8 !important; } html.dark .text-violet-700 { color: #c4b5fd !important; } html.dark .text-emerald-700 { color: #6ee7b7 !important; } html.dark .text-amber-700 { color: #fcd34d !important; } html.dark .border-rose-200 { border-color: rgba(244,63,94,0.35) !important; } html.dark .border-rose-500\/20 { border-color: rgba(244,63,94,0.30) !important; } html.dark .border-rose-500\/30 { border-color: rgba(244,63,94,0.40) !important; } html.dark .border-sky-200 { border-color: rgba(14,165,233,0.35) !important; } html.dark .border-sky-500\/30 { border-color: rgba(14,165,233,0.40) !important; } html.dark .border-violet-200 { border-color: rgba(139,92,246,0.35) !important; } html.dark .border-violet-500\/30 { border-color: rgba(139,92,246,0.40) !important; } html.dark .border-emerald-200 { border-color: rgba(16,185,129,0.35) !important; } html.dark .border-emerald-500\/30 { border-color: rgba(16,185,129,0.40) !important; } html.dark .border-amber-200 { border-color: rgba(251,191,36,0.35) !important; } html.dark .border-amber-500\/30 { border-color: rgba(251,191,36,0.40) !important; } html.dark .bg-rose-500\/15 { background-color: rgba(244,63,94,0.18) !important; } html.dark .bg-sky-500\/15 { background-color: rgba(14,165,233,0.18) !important; } html.dark .bg-violet-500\/15 { background-color: rgba(139,92,246,0.18) !important; } html.dark .bg-emerald-500\/15 { background-color: rgba(16,185,129,0.18) !important; } html.dark .bg-amber-500\/15 { background-color: rgba(251,191,36,0.18) !important; } /* Form inputs */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="search"], html.dark input:not([type]), html.dark select, html.dark textarea { background-color: #1c1917 !important; border-color: #44403c !important; color: #fafaf9 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #78716c !important; } /* Focus ring */ html.dark button:focus-visible, html.dark a:focus-visible, html.dark input:focus-visible { outline-color: #a78bfa; } /* Soft theme transition — disabled during initial paint (via * .no-theme-transition on ) to avoid the page animating from * light → dark on first load. */ html, body, * { transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease; } *:hover, svg circle, svg line, svg path, svg rect, svg text { transition: none !important; } html.no-theme-transition, html.no-theme-transition * { transition: none !important; }