feat(style): add CSS theme system with light/dark mode toggle

Introduces a global design system using CSS custom properties as
design tokens. Light and dark themes are defined via [data-theme]
attribute on <html>; the system preference (prefers-color-scheme)
is the default when no explicit choice is stored.

ThemeToggle component (Auto → Light → Dark cycle) persists the
choice to localStorage and applies it on hydration without flash.
New themes can be added by defining a [data-theme="name"] CSS block
and adding a variant to ThemeChoice.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-15 22:49:17 +02:00
parent 3aeb74e5bc
commit 589aab7e3d
8 changed files with 901 additions and 39 deletions

1
Cargo.lock generated
View File

@@ -2015,6 +2015,7 @@ dependencies = [
"tracing",
"tracing-subscriber",
"wasm-bindgen",
"web-sys",
]
[[package]]