/* * Synod dark theme. * * Strategy: the whole UI (console, goals, activity, workforce, roles, learning, * chat, resources, inbox, and the index shell) is built from a small, shared set * of Tailwind utility classes — overwhelmingly the zinc neutral ramp plus a few * accent ramps (teal/rose/emerald/amber/cyan/...) used by status badges. Rather * than sprinkle `dark:` variants across ~10k lines of generated markup, we remap * those exact utility classes once, here, scoped under `html[data-theme="dark"]`. * * This sheet is loaded AFTER the Tailwind browser build, so equal-or-higher * specificity (`html[data-theme="dark"] .bg-white`) reliably wins. The light * theme is unchanged: with no `data-theme="dark"` attribute none of these rules * apply, so the default Tailwind palette renders exactly as before. * * Adding a new surface: if a view introduces a utility class not remapped here, * add a single rule below. Keep dark values within the same hue family so badge * semantics (rose = error, emerald = success, amber = warning) stay legible. */ html[data-theme="dark"] { color-scheme: dark; } /* Page + base text on . */ html[data-theme="dark"] body { background-color: #09090b; /* zinc-950 */ color: #fafafa; /* zinc-50 */ } /* ---- Backgrounds: neutral surfaces ---- */ /* white/zinc-50 surfaces become near-black cards; zinc-100/200 become slightly lifted; the dark-on-light primary buttons (bg-zinc-950/900/800) flip to a light surface so they stay the high-contrast "primary" affordance. */ html[data-theme="dark"] .bg-white { background-color: #18181b; } /* zinc-900 */ html[data-theme="dark"] .bg-zinc-50 { background-color: #18181b; } /* zinc-900 */ html[data-theme="dark"] .bg-zinc-100 { background-color: #27272a; }/* zinc-800 */ html[data-theme="dark"] .bg-zinc-200 { background-color: #3f3f46; }/* zinc-700 */ html[data-theme="dark"] .bg-zinc-900 { background-color: #f4f4f5; }/* -> light */ html[data-theme="dark"] .bg-zinc-950 { background-color: #fafafa; }/* -> light */ html[data-theme="dark"] .bg-zinc-400 { background-color: #52525b; }/* disabled */ /* Primary buttons flip to a light fill: keep their hover legible too. */ html[data-theme="dark"] .hover\:bg-zinc-800:hover { background-color: #e4e4e7; } html[data-theme="dark"] .hover\:bg-zinc-50:hover { background-color: #27272a; } html[data-theme="dark"] .hover\:bg-zinc-100:hover { background-color: #27272a; } html[data-theme="dark"] .hover\:bg-zinc-200:hover { background-color: #3f3f46; } html[data-theme="dark"] .disabled\:bg-zinc-400:disabled { background-color: #3f3f46; } /* ---- Text: neutral ramp ---- */ /* Light text on dark: invert the zinc ink ramp. The very-dark inks (zinc-950/900) read as the brightest foreground; the mid greys lighten so secondary copy stays readable. zinc-100 text sits on the flipped (light) primary buttons. */ html[data-theme="dark"] .text-zinc-950 { color: #fafafa; } html[data-theme="dark"] .text-zinc-900 { color: #f4f4f5; } html[data-theme="dark"] .text-zinc-800 { color: #e4e4e7; } html[data-theme="dark"] .text-zinc-700 { color: #d4d4d8; } html[data-theme="dark"] .text-zinc-600 { color: #a1a1aa; } html[data-theme="dark"] .text-zinc-500 { color: #a1a1aa; } html[data-theme="dark"] .text-zinc-400 { color: #71717a; } html[data-theme="dark"] .text-zinc-100 { color: #18181b; } /* on light buttons */ html[data-theme="dark"] .text-white { color: #fafafa; } /* Text that sits ON a flipped (light) primary surface must go dark to stay legible — whether the .text-white is a descendant of, or on the SAME element as, the flipped bg (the primary buttons are `bg-zinc-950 text-white`). */ html[data-theme="dark"] .bg-zinc-950 .text-white, html[data-theme="dark"] .bg-zinc-900 .text-white, html[data-theme="dark"] .bg-zinc-950.text-white, html[data-theme="dark"] .bg-zinc-900.text-white { color: #18181b; } /* ---- Borders: neutral ramp ---- */ /* The generic `.border` default MUST come first: it and the per-ramp `.border-zinc-*` rules share the same specificity, so source order decides. With `.border` first, an element carrying `border border-zinc-200` keeps its per-ramp colour (the later, more specific-by-intent rule wins) instead of collapsing every border to the generic shade. */ html[data-theme="dark"] .border { border-color: #3f3f46; } /* zinc-700, generic default */ html[data-theme="dark"] .border-zinc-100 { border-color: #27272a; } /* zinc-800, subtlest */ html[data-theme="dark"] .border-zinc-200 { border-color: #3f3f46; } /* zinc-700 */ html[data-theme="dark"] .border-zinc-300 { border-color: #52525b; } /* zinc-600, strongest */ html[data-theme="dark"] .hover\:border-teal-600:hover { border-color: #2dd4bf; } /* ---- Inputs / selects / textareas ---- */ /* Form controls inherit the dark surface but need an explicit field colour so the browser default (light) chrome doesn't leak in. */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #27272a; color: #fafafa; border-color: #3f3f46; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #71717a; } html[data-theme="dark"] select option { background-color: #18181b; color: #fafafa; } /* ---- Accent surfaces (status badges, callouts) ---- Keep the hue, deepen the fill, lighten the ink, so semantics survive the flip: teal = brand/active, emerald = success, rose/red = error, amber = warning, cyan/blue/violet/indigo/orange = misc kind tags. */ /* teal (brand / active / selected) */ html[data-theme="dark"] .bg-teal-50 { background-color: #134e4a; } html[data-theme="dark"] .bg-teal-100 { background-color: #115e59; } html[data-theme="dark"] .text-teal-700, html[data-theme="dark"] .text-teal-800, html[data-theme="dark"] .text-teal-900 { color: #5eead4; } html[data-theme="dark"] .hover\:text-teal-900:hover { color: #99f6e4; } html[data-theme="dark"] .border-teal-600 { border-color: #0d9488; } /* emerald (success) */ html[data-theme="dark"] .bg-emerald-50 { background-color: #064e3b; } html[data-theme="dark"] .bg-emerald-100 { background-color: #065f46; } html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-emerald-900 { color: #6ee7b7; } html[data-theme="dark"] .border-emerald-200 { border-color: #065f46; } html[data-theme="dark"] .border-emerald-300 { border-color: #047857; } html[data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: #064e3b; } /* rose / red (error / danger) */ html[data-theme="dark"] .bg-rose-50 { background-color: #4c0519; } html[data-theme="dark"] .bg-rose-100 { background-color: #881337; } html[data-theme="dark"] .bg-rose-200 { background-color: #9f1239; } html[data-theme="dark"] .text-rose-700, html[data-theme="dark"] .text-rose-800, html[data-theme="dark"] .text-rose-900 { color: #fda4af; } html[data-theme="dark"] .border-rose-200 { border-color: #881337; } html[data-theme="dark"] .border-rose-300 { border-color: #9f1239; } html[data-theme="dark"] .hover\:bg-rose-200:hover { background-color: #9f1239; } html[data-theme="dark"] .bg-red-50 { background-color: #450a0a; } html[data-theme="dark"] .bg-red-100 { background-color: #7f1d1d; } html[data-theme="dark"] .text-red-600, html[data-theme="dark"] .text-red-700 { color: #fca5a5; } html[data-theme="dark"] .border-red-200 { border-color: #7f1d1d; } html[data-theme="dark"] .border-red-300 { border-color: #991b1b; } /* amber (warning) */ html[data-theme="dark"] .bg-amber-50 { background-color: #451a03; } html[data-theme="dark"] .bg-amber-100 { background-color: #78350f; } html[data-theme="dark"] .bg-amber-400 { background-color: #b45309; } html[data-theme="dark"] .text-amber-700, html[data-theme="dark"] .text-amber-800, html[data-theme="dark"] .text-amber-900, html[data-theme="dark"] .text-amber-950 { color: #fcd34d; } html[data-theme="dark"] .border-amber-200 { border-color: #78350f; } html[data-theme="dark"] .border-amber-500 { border-color: #b45309; } /* cyan / blue / indigo / violet / orange (entity-kind tags) */ html[data-theme="dark"] .bg-cyan-50 { background-color: #083344; } html[data-theme="dark"] .bg-cyan-100 { background-color: #155e75; } html[data-theme="dark"] .text-cyan-700, html[data-theme="dark"] .text-cyan-800, html[data-theme="dark"] .text-cyan-900 { color: #67e8f9; } html[data-theme="dark"] .border-cyan-200 { border-color: #155e75; } html[data-theme="dark"] .bg-blue-50 { background-color: #172554; } html[data-theme="dark"] .bg-blue-100 { background-color: #1e3a8a; } html[data-theme="dark"] .text-blue-700, html[data-theme="dark"] .text-blue-800, html[data-theme="dark"] .text-blue-900 { color: #93c5fd; } html[data-theme="dark"] .border-blue-200 { border-color: #1e3a8a; } html[data-theme="dark"] .bg-indigo-100 { background-color: #312e81; } html[data-theme="dark"] .text-indigo-700 { color: #a5b4fc; } html[data-theme="dark"] .bg-violet-50 { background-color: #2e1065; } html[data-theme="dark"] .bg-violet-100 { background-color: #4c1d95; } html[data-theme="dark"] .text-violet-800 { color: #c4b5fd; } html[data-theme="dark"] .border-violet-300 { border-color: #5b21b6; } html[data-theme="dark"] .bg-orange-100 { background-color: #7c2d12; } html[data-theme="dark"] .text-orange-700, html[data-theme="dark"] .text-orange-800 { color: #fdba74; } /* teal primary action buttons (chat Send, etc.) keep their brand fill but tuned for dark contrast. */ html[data-theme="dark"] .bg-teal-600 { background-color: #0d9488; } html[data-theme="dark"] .bg-teal-700 { background-color: #0f766e; } html[data-theme="dark"] .bg-teal-800 { background-color: #115e59; } html[data-theme="dark"] .hover\:bg-teal-800:hover { background-color: #115e59; } /* Focus ring tints on inputs. */ html[data-theme="dark"] .focus\:ring-teal-100:focus { --tw-ring-color: rgba(20, 184, 166, 0.25); } /* ---- Markdown prose (chat assistant bubbles use `prose prose-zinc`) ---- */ html[data-theme="dark"] .prose, html[data-theme="dark"] .prose p, html[data-theme="dark"] .prose li, html[data-theme="dark"] .prose td, html[data-theme="dark"] .prose th { color: #d4d4d8; } html[data-theme="dark"] .prose h1, html[data-theme="dark"] .prose h2, html[data-theme="dark"] .prose h3, html[data-theme="dark"] .prose h4, html[data-theme="dark"] .prose strong { color: #fafafa; } html[data-theme="dark"] .prose a { color: #5eead4; } html[data-theme="dark"] .prose code { color: #f4f4f5; } html[data-theme="dark"] .prose pre { background-color: #18181b; color: #e4e4e7; } html[data-theme="dark"] .prose blockquote { color: #a1a1aa; border-left-color: #3f3f46; } html[data-theme="dark"] .prose hr { border-color: #3f3f46; } /* ---- Theme toggle button glyphs ---- */ /* The toggle shows a moon in light mode (click for dark) and a sun in dark mode. */ #theme-toggle .theme-icon-dark { display: inline; } #theme-toggle .theme-icon-light { display: none; } html[data-theme="dark"] #theme-toggle .theme-icon-dark { display: none; } html[data-theme="dark"] #theme-toggle .theme-icon-light { display: inline; }