Theming-Tutorial — Lily Design System

Was du baust

Eine App, deren gesamtes Aussehen die Nutzenden ändern können — beginnend mit einem eingebundenen Stylesheet, endend mit einem dauerhaften Theme-Umschalter zur Laufzeit — in etwa 15 Minuten.

Bevor du anfängst

Schließe zuerst das Framework-Tutorial für deinen Stack zuerst, damit du ein kleines Lily-Formular zum Gestalten hast. Alles hier funktioniert in allen sieben Frameworks; die Codebeispiele zeigen Svelte und reines HTML.

Schritt 1 — Ein fertiges Theme einbinden

themes/ Verzeichnis enthält 45 eigenständige Stylesheets. Kopiere sie in die statischen Assets deiner App und binde eines ein:

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

Highlights des Satzes:

Öffentlicher Sektor — NHS England / Scotland / Wales, jeweils in Varianten für Patientinnen und Patienten sowie für Fachkräfte; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
Von Anbietern inspiriert — adobe-spectrum, mozilla-protocol.
Allzweck — light, dark, nord, dracula, wireframe, corporate, synthwaveund viele weitere.

Prüfe deine Arbeit: lade die Seite neu. Dasselbe Markup, das du im Framework-Tutorial gebaut hast, ist jetzt vollständig gestaltet — Buttons, Eingaben, Labels, Fokusringe. Eine Zeile HTML hat das bewirkt — jede Komponente blieb genau wie zuvor.

Schritt 2 — Alles überschreiben

Theme-Selektoren sind eingewickelt in :where(...)das keine Spezifität hat — jede Regel, die du schreibst, gewinnt also, ganz einfach:

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

Schritt 3 — Umschalten zur Laufzeit mit theme-picker

theme-picker Der Helper ist ein Headless-Icon-Button + Listbox, der den gesamten Theme-Lebenszyklus besitzt: Er lädt das gewählte Stylesheet, indem er ein verwaltetes <link> austauscht (nur das aktive Theme wird je geladen), setzt data-theme="{slug}" auf dem Dokument und speichert optional dauerhaft in localStorage. Hier ist Svelte gezeigt; die Ports für React, Vue, Angular, HTML, Nunjucks und Blazor entsprechen Vertrag für Vertrag:

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

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

Das ist die ganze Integration. Das Tastaturverhalten folgt dem WAI-ARIA-APG-Listbox-Muster; das Bedienelement selbst ist headless (Klassen-Hook .theme-picker), also übernimmt es, welches Theme gerade aktiv ist.

Geprüft am 2026-08-29: genau dieses Snippet wurde gegen das veröffentlichte 0.1.1 -Paket kompiliert, über svelte/server.

Schritt 4 — Im eigenen CSS auf das Theme reagieren

Weil der Helper data-theme auf der Dokumentwurzel setzt, können sich deine eigenen Styles darauf verzweigen:

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

Hinweise zum serverseitigen Rendering

Der Helper führt alle DOM-Schreibzugriffe im Mount-/Effect-Lebenszyklus des Frameworks aus und ist damit von Grund auf SSR-sicher. Um ein Aufblitzen beim ersten Zeichnen zu vermeiden, rendere das <link> und data-theme des Start-Themes auf dem Server (zum Beispiel aus einem Cookie) — das Repo des Svelte-Helpers enthält ein lauffähiges SvelteKit-Cookie-Beispiel, und die anderen Kataloge dokumentieren dasselbe Muster für ihre Stacks.

Nächste Schritte

Einstellungs-Helper — dasselbe Muster für Sprache, Textgröße, Teilen und Datums-/Zeiteingabe.
Ein Theme beisteuern — jedes ist ein eigenständiges Stylesheet, das auf die Klassen-Hooks zielt; siehe Mitwirken.

Fragen unterwegs? Die Hilfeseite steckt voller Antworten — und wenn ein Schritt klarer sein könnte, sag es uns und wir verbessern das Tutorial gern.