Lily Design System™

Thema's

Lily-componenten hebben stabiele klassehaken en nul CSS — dus een thema is gewoon een stylesheet. Deze handleiding gaat van "koppel één bestand" naar "laat de gebruiker tijdens het draaien van thema wisselen, bewaard".

Wat je gaat bouwen

Een app waarvan de gebruiker het hele uiterlijk kan veranderen — beginnend met één gekoppelde stylesheet, eindigend met een bewaarde thema-wisselaar tijdens het draaien — in ongeveer 15 minuten.

Voordat je begint

Rond eerst de framework-handleiding voor jouw stack eerst, zodat je een klein Lily-formulier hebt om te thematiseren. Alles hier werkt in alle zeven frameworks; de codevoorbeelden tonen Svelte en gewone HTML.

Stap 1 — Koppel een kant-en-klaar thema

themes/ map bevat 45 losse stylesheets. Kopieer ze naar de statische assets van je app en koppel er één: 

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

Hoogtepunten van de set:

  • Publieke sector — NHS England / Scotland / Wales, elk in patiëntgerichte en beroepsbeoefenaarsgerichte varianten; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Door leveranciers geïnspireerd — adobe-spectrum, mozilla-protocol.
  • Algemeen gebruik — light, dark, nord, dracula, wireframe, corporate, synthwave, en nog veel meer.

Controleer je werk: laad de pagina opnieuw. Dezelfde markup die je in de framework-handleiding bouwde, is nu volledig vormgegeven — knoppen, velden, labels, focusringen. Eén regel HTML deed dat — elke component bleef precies zoals hij was.

Stap 2 — Overschrijf alles

Themaselectors zijn verpakt in :where(...)dat nul specificiteit heeft — dus elke regel die je schrijft wint, eenvoudig: 

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

Stap 3 — Wisselen tijdens het draaien met theme-picker

theme-picker de helper is een headless pictogramknop + listbox die de hele thema-levenscyclus bezit: hij laadt de gekozen stylesheet door één beheerde <link> te verwisselen (alleen het actieve thema wordt opgehaald), zet data-theme="{slug}" op het document en bewaart optioneel in localStorage. Hier is Svelte getoond; de ports voor React, Vue, Angular, HTML, Nunjucks en Blazor komen contract voor contract overeen: 

<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 is de hele integratie. Toetsenbordgedrag volgt het WAI-ARIA APG-listboxpatroon; het bedieningselement zelf is headless (klassehaak .theme-picker), dus het neemt over welk thema ook actief is.

Geverifieerd op 2026-08-29: dit exacte fragment is gecompileerd tegen het gepubliceerde 0.1.1 -pakket via svelte/server.

Stap 4 — Reageer op het thema in je eigen CSS

Omdat de helper data-theme op de documentroot zet, kunnen je eigen stijlen erop vertakken: 

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

Opmerkingen voor server-side rendering

De helper doet alle DOM-schrijfacties binnen de mount-/effect-levenscyclus van het framework, dus hij is van nature SSR-veilig. Om een flits bij de eerste weergave te vermijden, render je het <link> en data-theme van het begin-thema op de server (bijvoorbeeld uit een cookie) — de repo van de Svelte-helper levert een uitvoerbaar SvelteKit-cookievoorbeeld mee, en de andere catalogi documenteren hetzelfde patroon voor hun stacks.

Volgende stappen

  • Voorkeurenhelpers — hetzelfde patroon voor taal, tekstgrootte, delen en datum-/tijdinvoer.
  • Draag een thema bij — elk is één losse stylesheet die zich op de klassehaken richt; zie bijdragen.

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.