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

View File

@@ -32,6 +32,7 @@ ssr = [
hydrate = [
"dep:console_error_panic_hook",
"dep:wasm-bindgen",
"dep:web-sys",
"leptos/hydrate",
]
@@ -79,6 +80,8 @@ sqlx = { version = "0.8", features = ["runtime-tokio", "tls-rustls", "sqlite", "
console_error_panic_hook = { version = "0.1", optional = true }
# Pont entre Rust/WASM et JavaScript : permet d'appeler du JS depuis Rust
wasm-bindgen = { version = "0.2", optional = true }
# Bindings aux APIs du navigateur : window, document, localStorage, Element...
web-sys = { version = "0.3", features = ["Window", "Document", "Element", "Storage"], optional = true }
# Configuration Leptos lue par get_configuration(Some("Cargo.toml"))
# Définit les chemins des fichiers compilés et l'adresse du serveur.