/* ============================================================================= Theme — dark mode for the "Quiet Ledger" design system ============================================================================= Dark mode is one token flip. Every ak-* component and semantic Tailwind utility (bg-canvas, text-ink, border-rule, text-primary, bg-surface-muted, …) resolves to a `var(--color-*)` declared in the `@theme` block (app/assets/tailwind/ application.css). Redeclaring those custom properties under [data-theme="dark"] flips the whole app in one place — exactly the plan in docs/COLORS.md — with no ad-hoc `dark:` variants to drift. This file is imported by app/assets/tailwind/application.css AFTER the @theme block, so these overrides win by source order (equal specificity to :root). The theme is set on before first paint by the nonce'd pre-paint script in the app layout, and toggled by theme_controller.js. ============================================================================= */ [data-theme="dark"] { /* Canvas & surfaces — true neutral near-black (monochrome register) */ --color-canvas: #0e0e0e; --color-surface: #141414; --color-surface-muted: #1c1c1c; /* Ink & structure — light ink on the dark canvas, hairlines lightened */ --color-ink: #f2f2f2; --color-muted: #a6a6a6; --color-faint: #757575; --color-rule: #333333; --color-soft-rule: #262626; /* Primary — the ink pill inverts: white pill, dark label */ --color-primary: #f2f2f2; --color-primary-dark: #d9d9d9; --color-on-primary: #0a0a0a; /* Semantic families — same hues, brightened foregrounds, deep-tinted grounds. The legacy aliases (--color-info, --color-buy, …) are declared once in the @theme block as var() references to these family names, so overriding the families here re-skins the aliases too. Terminal (--color-term-*) tokens are fixed in both themes — the transcript block is always dark. */ --color-seal: #6fa8cf; --color-seal-bg: #16232c; --color-seal-text: #8fc0e0; --color-seal-line: #2a4459; --color-hold: #d8a13f; --color-hold-bg: #2a2411; --color-hold-text: #d8b968; --color-hold-line: #4a3d1d; --color-verify: #4fae86; --color-verify-bg: #12261c; --color-verify-text: #7fd0aa; --color-verify-line: #1d4534; --color-danger: #e07a70; --color-danger-bg: #2a1917; --color-danger-text: #eb968c; --color-danger-line: #4c2824; --color-compute: #9c93dd; --color-compute-bg: #201e36; --color-compute-text: #b0a8e8; --color-compute-line: #3a3560; --color-neutral-bg: #1c1c1c; --color-neutral-text: #a6a6a6; color-scheme: dark; } /* Sun/moon swap — show the icon for the theme you'd switch TO. Light shows the moon (go dark); dark shows the sun (go light). CSS-driven off [data-theme] so it's correct on the server-rendered first paint, before JS boots. */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: inline-block; } [data-theme="dark"] .theme-toggle__sun { display: inline-block; } [data-theme="dark"] .theme-toggle__moon { display: none; }