Themen-Tutorial — Lily Design System

Wat Dir bauen wäert

Eng App, vun där de Benotzer dat ganzt Ausgesi ännere kann — ugefaange mat engem verlinkte Stylesheet, opgehalen mat engem persistente Themewiesselen zur Laafzäit — an ongeféier 15 Minutten.

Ier Dir ufänkt

Maacht fir d'éischt de Framework-Tutorial fir Äre Stack fir d'éischt, sou datt Dir e klengt Lily-Formulaire hutt, dat Dir themaiséiere kënnt. Alles hei funktionéiert an alle siwe Frameworks; d'Codebeispiller weisen Svelte an einfacht HTML.

Schrëtt 1 — E fäerdegt Thema verlinken

themes/ -Verzeechnes enthält 45 eegestänneg Stylesheets. Kopéiert se an d'statesch Assets vun Ärer App a verlinkt ee:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Highlights vum Set:

Ëffentleche Secteur — NHS England / Scotland / Wales, jidd a Patienten- a Praktiker-Varianten; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
Vun Ubidder inspiréiert — adobe-spectrum, mozilla-protocol.
Allgemeng Notzung — light, dark, nord, dracula, wireframe, corporate, synthwave, a vill méi.

Kontrolléiert Är Aarbecht: luet d'Säit nei. Datselwecht Markup, dat Dir am Framework-Tutorial gebaut hutt, ass elo voll gestalt — Knäppercher, Inputen, Etiketten, Fokusréng. Eng Zeil HTML huet dat gemaach — all Komponent ass genee esou bliwwen, wéi se war.

Schrëtt 2 — Alles iwwerschreiwen

D'Theme-Selectoren sinn agewéckelt a :where(...)wat null Spezifizitéit huet — also gewënnt all Regel, déi Dir schreift, einfach:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Schrëtt 3 — Wiessel zur Laafzäit mat theme-picker

theme-picker den Helper ass e Headless-Ikonknäppchen + Listbox, dee de ganze Liewenszyklus vum Thema besëtzt: en luet de gewielte Stylesheet, andeems en een eenzege geréierte <link> (nëmmen dat aktivt Thema gëtt gehuelt) ëmtauscht, setzt data-theme="{slug}" um Dokument an späichert optional an localStorage. Hei gëtt Svelte gewisen; d'Ports fir React, Vue, Angular, HTML, Nunjucks a Blazor entspriechen him Kontrakt fir Kontrakt:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Dat ass déi ganz Integratioun. D'Tastaturverhalen follegt dem WAI-ARIA APG-Listbox-Muster; d'Kontroll selwer ass headless (Klassen-Hook .theme-picker), sou datt si dat aktivt Thema iwwerhëlt, wat och ëmmer et ass.

Gepréift den 2026-08-29: dësen exakte Snippet gouf géint dat verëffentlecht 0.1.1 -Package kompiléiert, iwwer svelte/server.

Schrëtt 4 — Op d'Thema an Ärem eegene CSS reagéieren

Well den Helper data-theme op d'Wuerzel vum Dokument setzt, kënnen Är eege Stiler sech doraus verzweigen:

[data-theme="dark"] .site-logo { filter: invert(1); }

Notize fir serversäiteg Rendering

Den Helper mécht all DOM-Schreiwen am Mount-/Effect-Liewenszyklus vum Framework, dofir ass hien vun der Konstruktioun hier SSR-sécher. Fir e Blénken beim éischte Molen ze vermeiden, rendert de <link> an data-theme vum Ufankstema um Server (zum Beispill aus engem Cookie) — de Repo vum Svelte-Helper huet e lafbaart SvelteKit-Cookie-Beispill, an déi aner Katalogen dokumentéieren datselwecht Muster fir hir Stacks.

Nächst Schrëtt

Astellungs-Helperen — datselwecht Muster fir Sprooch, Textgréisst, Deelen an Datum-/Zäitagab.
E Thema bäisteieren — jidd ass een eegestännege Stylesheet, deen d'Klassen-Hooks ugräift; kuckt d'Matmaachen.

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.