body { --color-text: var(--color-black); --color-background: var(--color-pink); --color-accent: var(--color-green); --color-warn: var(--color-red); --color-favorite: var(--color-raspberry); --border-width: 2px; --tag-border-width: 1px; --calendar-border-width: 1px; --border-color: var(--theme-accent-color); --theme-bg-color: var(--color-background); --theme-fg-color: var(--color-text); --theme-accent-color: var(--color-accent); --theme-warn-color: var(--color-warn); --theme-favorite-color: var(--color-favorite); --theme-fg-muted: hsl(from var(--theme-fg-color) h s calc(l + 30)); --theme-bg-muted: hsl(from var(--theme-bg-color) h s calc(l - 10)); --theme-accent-muted: hsl(from var(--theme-accent-color) h calc(s - 60) calc(l + 15)); color-scheme: light; background-color: var(--theme-bg-color); color: var(--theme-fg-color); transition: background-color 0.2s ease, color 0.2s ease; } /* Dark theme. The toggle (theme_controller.js) resolves the user's system/light/dark preference to a concrete light|dark value and sets it on , so we only need a single dark override here — the muted tokens are recomputed in the opposite direction from light. */ html[data-theme="dark"] body { /* Soft, faintly warm off-white rather than near-#fff: pure white halates against the dark plum ground and reads as harsh. */ --color-text: #d4ced3; --color-background: #17131a; /* Slightly calmer green and raspberry so links/hearts read as accents instead of glowing against the dark field. */ --color-accent: #38c08a; --color-warn: #f0837a; --color-favorite: #ec6f98; /* Muted recalcs run opposite to light: dim the bright fg, lift the dark bg. -25 keeps secondary text comfortably readable (not as dim as the fg drop alone would make it). */ --theme-fg-muted: hsl(from var(--theme-fg-color) h s calc(l - 25)); --theme-bg-muted: hsl(from var(--theme-bg-color) h s calc(l + 5)); --theme-accent-muted: hsl(from var(--theme-accent-color) h calc(s - 35) calc(l - 12)); color-scheme: dark; } input { color: var(--theme-accent-color); }