Thèmes
Les composants Lily ont des crochets de classe stables et zéro CSS — un thème n'est donc qu'une feuille de style. Ce tutoriel va de « liez un fichier » à « laissez l'utilisateur changer de thème à l'exécution, avec persistance ».
Ce que vous allez construire
Une application dont l'utilisateur peut changer tout l'aspect — en partant d'une feuille de style liée et en finissant par un sélecteur de thème persistant à l'exécution — en 15 minutes environ.
Avant de commencer
Terminez d'abord le tutoriel du framework pour votre pile d'abord, afin d'avoir un petit formulaire Lily à thématiser. Tout ici fonctionne dans les sept frameworks ; les exemples de code montrent Svelte et HTML simple.
Étape 1 — Lier un thème prêt à l'emploi
themes/ le répertoire contient 45 feuilles de style autonomes. Copiez-les dans les ressources statiques de votre application et liez-en une :
<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />Points forts de l'ensemble :
-
Secteur public — NHS England / Scotland / Wales, chacun en variantes pour les patients et pour les praticiens ; GOV.UK (
united-kingdom-government-digital-service) ; USWDS (united-states-web-design-system). - Inspirés de fournisseurs —
adobe-spectrum,mozilla-protocol. -
Usage général —
light,dark,nord,dracula,wireframe,corporate,synthwave, et bien d'autres.
Vérifiez votre travail : rechargez la page. Le même balisage que vous avez construit dans le tutoriel du framework est maintenant entièrement stylé — boutons, champs, étiquettes, anneaux de focus. Une ligne de HTML a fait cela — chaque composant est resté exactement tel qu'il était.
Étape 2 — Tout remplacer
Les sélecteurs de thème sont enveloppés dans :where(...)qui a une spécificité nulle — donc toute règle que vous écrivez l'emporte, tout simplement :
/* After the theme link: your brand button, everything else themed */
.button {
background: #7c3aed;
border-radius: 9999px;
}Étape 3 — Changement à l'exécution avec theme-picker
theme-picker l'assistant est un bouton-icône sans tête + liste qui possède tout le cycle de vie du thème : il charge la feuille de style choisie en échangeant un seul <link>
géré (seul le thème actif est récupéré), définit
data-theme="{slug}" sur le document et persiste facultativement dans localStorage. Svelte est montré ici ; les portages React, Vue, Angular, HTML, Nunjucks et Blazor correspondent contrat par contrat :
<script>
import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>
<ThemePicker
label="Theme"
themesUrl="/assets/themes/"
themes={["light", "dark", "nord", "wireframe"]}
storageKey="my-app-theme"
/>
C'est toute l'intégration. Le comportement clavier suit le motif de liste WAI-ARIA APG ; le contrôle lui-même est sans tête (crochet de classe
.theme-picker), donc il adopte le thème actif, quel qu'il soit.
Vérifié le 2026-08-29 : cet extrait exact a été compilé contre le paquet 0.1.1 publié, via
svelte/server.
Étape 4 — Réagir au thème dans votre propre CSS
Comme l'assistant définit data-theme sur la racine du document, vos propres styles peuvent se ramifier dessus :
[data-theme="dark"] .site-logo { filter: invert(1); }Remarques sur le rendu côté serveur
L'assistant effectue toutes les écritures dans le DOM dans le cycle de vie mount/effect du framework, il est donc sûr pour le SSR par construction. Pour éviter un flash au premier affichage, rendez côté serveur le <link> et
data-theme du thème initial (par exemple depuis un cookie) — le dépôt de l'assistant Svelte inclut un exemple exécutable de cookie SvelteKit, et les autres catalogues documentent le même motif pour leurs piles.
Étapes suivantes
- Assistants de préférences — le même motif pour la langue, la taille du texte, le partage et la saisie de date/heure.
- Contribuer un thème — chacun est une feuille de style autonome qui cible les crochets de classe ; voir contribuer.
Des questions en chemin ? La page d'aide regorge de réponses — et si une étape peut être plus claire, dites-le-nous et nous améliorerons volontiers le tutoriel.