/* ============================================================================= 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 — a warm near-ink, matching the green-tinted ink hue */ --color-canvas: #10140f; --color-surface: #161b15; --color-surface-muted: #1c221b; /* Ink & structure — light ink on the dark canvas, hairlines lightened */ --color-ink: #eef2ec; --color-muted: #9aa598; --color-faint: #6f7a6d; --color-rule: #2b322a; --color-soft-rule: #222820; /* Accent — derived from BRAND_COLOR (blue). The 500 shade reads on the dark canvas where the light-mode 700 would be too deep; hover uses the 700. */ --color-primary: #3b82f6; --color-primary-dark: #1d4ed8; /* Semantic data colors — same hues, brightened foregrounds, deep-tinted grounds */ --color-accent: #d8a13f; --color-sell: #e07a70; --color-info: #5aa0cf; --color-buy: #4fae86; --color-buy-bg: #14261d; --color-buy-text: #7fd0aa; --color-sell-bg: #2a1917; --color-sell-text: #eb968c; --color-trim-bg: #2a2411; --color-trim-text: #d8b968; --color-neutral-bg: #1c221b; --color-neutral-text: #9aa598; 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; }