Lily Design System™

Tema

Lily-komponenter bærer stabile klassekroker og null CSS — så et tema er bare et stilark. Denne veiledningen går fra «lenk til én fil» til «la brukeren bytte tema ved kjøretid, lagret».

Hva du skal bygge

En app der hele utseendet kan endres av brukeren — fra ett lenket stilark til en vedvarende temabytter ved kjøretid — på omtrent 15 minutter.

Før du begynner

Fullfør rammeverksveiledningen først for stacken din, slik at du har et lite Lily-skjema å gi tema. Alt her fungerer i alle syv rammeverk; kodeeksemplene viser Svelte og ren HTML.

Steg 1 — Lenk til et ferdig tema

themes/ katalogen leveres med 45 frittstående stilark. Kopier dem inn i appens statiske ressurser og lenk til ett: 

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

Høydepunkter i settet:

  • Offentlig sektor — NHS England / Scotland / Wales, hver i pasientrettede og utøverrettede varianter; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Leverandørinspirert — adobe-spectrum, mozilla-protocol.
  • Generelt formål — light, dark, nord, dracula, wireframe, corporate, synthwave, og mange flere.

Sjekk arbeidet ditt: last siden på nytt. Den samme markupen du bygde i rammeverksveiledningen er nå fullt stilet — knapper, inndatafelt, etiketter, fokusringer. Én linje HTML gjorde det — hver komponent forble akkurat som den var.

Steg 2 — Overstyr hva som helst

Temavelgere er pakket inn i :where(...)som har null spesifisitet — så enhver regel du skriver vinner, enkelt og greit: 

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

Steg 3 — Bytte ved kjøretid med theme-picker

theme-picker hjelperen er en hodeløs ikonknapp + listeboks som eier hele temaets livssyklus: den laster det valgte stilarket ved å bytte ett administrert <link> (bare det aktive temaet hentes noensinne), setter data-theme="{slug}" på dokumentet, og lagrer valgfritt i localStorage. Svelte vises her; portene for React, Vue, Angular, HTML, Nunjucks og Blazor samsvarer 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 integrasjonen. Tastaturoppførselen følger WAI-ARIA APG-listeboksmønsteret; selve kontrollen er hodeløs (klassekrok .theme-picker), så den tar opp hvilket tema som enn er aktivt.

Verifisert 2026-08-29: akkurat denne snutten ble kompilert mot den publiserte 0.1.1 pakken via svelte/server.

Steg 4 — Reager på temaet i din egen CSS

Fordi hjelperen setter data-theme på dokumentroten, kan dine egne stiler forgrene seg på det: 

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

Merknader om server-gjengivelse

Hjelperen utfører all DOM-skriving inni rammeverkets mount/effect-livssyklus, så den er SSR-sikker fra grunnen av. For å unngå flimmer ved første tegning gjengir du det opprinnelige temaets <link> og data-theme på serveren (for eksempel fra en informasjonskapsel) — Svelte-hjelperepoet leverer et kjørbart SvelteKit-informasjonskapseleksempel, og de andre katalogene dokumenterer samme mønster for sine stacker.

Neste steg

  • Preferansehjelpere — samme mønster for språk, tekststørrelse, deling og dato-/tidsinntasting.
  • Bidra med et tema — hvert er ett frittstående stilark som retter seg mot klassekrokene; se bidrag.

Spørsmål underveis? hjelpesiden er full av svar — og hvis et steg kan bli tydeligere, fortell oss så forbedrer vi gjerne veiledningen.