mathieu
589aab7e3d
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>
38 lines
1.5 KiB
HTML
38 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<!--
|
|
trunk complète automatiquement ce fichier lors de `trunk build` ou `trunk serve` :
|
|
- Il injecte les balises <link> pour charger le CSS compilé
|
|
- Il injecte les balises <script> pour charger le bundle WebAssembly
|
|
Ne pas ajouter ces balises manuellement ici — trunk le fait pour vous.
|
|
-->
|
|
<!--
|
|
Indique à trunk de compiler le target "lib" (cdylib → WASM)
|
|
et non le binaire "rust-ipam" (qui lui est le serveur Axum).
|
|
data-target-name correspond au nom du crate avec underscores (convention Rust).
|
|
-->
|
|
<link data-trunk rel="rust" data-target-name="rust_ipam" />
|
|
<!--
|
|
Compile style/rust-ipam.css → target/site/pkg/rust-ipam.css
|
|
Served by Axum at /pkg/rust-ipam.css and loaded by the <Stylesheet>
|
|
component in app.rs.
|
|
-->
|
|
<link data-trunk rel="css" href="style/rust-ipam.css" />
|
|
</head>
|
|
<body>
|
|
<!--
|
|
Leptos monte l'application ici via mount_to_body() (défini dans lib.rs).
|
|
|
|
Flux SSR + Hydration :
|
|
1. Le navigateur demande la page au serveur Axum
|
|
2. Axum rend le composant App() en HTML (SSR) et l'envoie
|
|
3. Le navigateur affiche le HTML instantanément (pas d'écran blanc)
|
|
4. Le bundle WASM se charge en arrière-plan
|
|
5. Leptos "hydrate" le HTML : attache les event listeners pour le rendre interactif
|
|
-->
|
|
</body>
|
|
</html>
|