Lily Design System™

Temaer

Lily-komponenter har stabile klassekroge og nul CSS — så et tema er bare et typografiark. Denne vejledning går fra "link én fil" til "lad brugeren skifte tema under kørsel, gemt vedvarende".

Det her bygger du

En app, hvis hele udseende brugeren kan ændre — fra ét linket typografiark til en vedvarende temaskifter under kørsel — på omkring 15 minutter.

Før du går i gang

Gør først framework-vejledningen til din stak først, så du har en lille Lily-formular at give tema. Alt her virker i alle syv frameworks; kodeeksemplerne viser Svelte og almindelig HTML.

Trin 1 — Link et færdigt tema

themes/ mappen indeholder 45 selvstændige typografiark. Kopiér dem ind i din apps statiske ressourcer og link et: 

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

Højdepunkter i sættet:

  • Offentlig sektor — NHS England / Scotland / Wales, hver i patientvendte og praktikervendte varianter; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspireret af leverandører — adobe-spectrum, mozilla-protocol.
  • Generelt brug — light, dark, nord, dracula, wireframe, corporate, synthwave, og mange flere.

Tjek dit arbejde: genindlæs siden. Den samme markup, du byggede i framework-vejledningen, er nu fuldt formgivet — knapper, felter, etiketter, fokusringe. Én linje HTML gjorde det — hver komponent forblev præcis, som den var.

Trin 2 — Tilsidesæt hvad som helst

Temaselektorer er pakket ind i :where(...)som har nul specificitet — så enhver regel, du skriver, vinder, helt enkelt: 

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

Trin 3 — Skift under kørsel med theme-picker

theme-picker hjælperen er en headless-ikonknap + listbox, der ejer hele temaets livscyklus: den indlæser det valgte typografiark ved at bytte ét administreret <link> (kun det aktive tema hentes), sætter data-theme="{slug}" på dokumentet og gemmer valgfrit vedvarende i localStorage. Her vises Svelte; portene til React, Vue, Angular, HTML, Nunjucks og Blazor svarer til det kontrakt for 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"
/>

Det er hele integrationen. Tastaturadfærden følger WAI-ARIA APG-listboxmønsteret; selve kontrollen er headless (klassekrog .theme-picker), så den overtager det tema, der er aktivt.

Verificeret 2026-08-29: dette præcise kodeeksempel blev kompileret mod den udgivne 0.1.1 -pakke via svelte/server.

Trin 4 — Reagér på temaet i din egen CSS

Fordi hjælperen sætter data-theme på dokumentroden, kan dine egne stilarter forgrene sig på det: 

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

Noter om servergengivelse

Hjælperen udfører alle DOM-skrivninger inden for frameworkets mount-/effect-livscyklus, så den er SSR-sikker af konstruktion. For at undgå et glimt ved første tegning skal du gengive <link> og data-theme for det første tema på serveren (for eksempel fra en cookie) — Svelte-hjælperens repo leveres med et kørbart SvelteKit-cookieeksempel, og de andre kataloger dokumenterer det samme mønster for deres stakke.

Næste skridt

  • Indstillingshjælpere — det samme mønster for sprog, tekststørrelse, deling og dato-/tidsindtastning.
  • Bidrag med et tema — hvert er ét selvstændigt typografiark, der retter sig mod klassekrogene; se at bidrage.

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.