Lily Design System™

Teman

Lily-komponenter har stabila klasskrokar och noll CSS — så ett tema är bara en stilmall. Den här handledningen går från "länka en fil" till "låt användaren byta tema under körning, med beständighet".

Det här bygger du

En app vars hela utseende användaren kan ändra — från en enda länkad stilmall till en beständig temaväxlare under körning — på ungefär 15 minuter.

Innan du börjar

Gör klart ramverkshandledningen för din stack först, så att du har ett litet Lily-formulär att ge tema. Allt här fungerar i alla sju ramverken; kodexemplen visar Svelte och ren HTML.

Steg 1 — Länka ett färdigt tema

themes/ katalogen innehåller 45 fristående stilmallar. Kopiera dem till appens statiska tillgångar och länka en: 

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

Höjdpunkter i uppsättningen:

  • Offentlig sektor — NHS England / Scotland / Wales, var och en i patientvända och yrkesvända varianter; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirerade av leverantörer — adobe-spectrum, mozilla-protocol.
  • Allmänt bruk — light, dark, nord, dracula, wireframe, corporate, synthwaveoch många fler.

Kontrollera ditt arbete: ladda om sidan. Samma markup som du byggde i ramverkshandledningen är nu fullt formgiven — knappar, fält, etiketter, fokusringar. En rad HTML gjorde det — varje komponent förblev precis som den var.

Steg 2 — Åsidosätt vad som helst

Temaselektorerna är inneslutna i :where(...)som har noll specificitet — så varje regel du skriver vinner, helt enkelt: 

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

Steg 3 — Byte under körning med theme-picker

theme-picker hjälparen är en headless-ikonknapp + listbox som äger hela temats livscykel: den laddar den valda stilmallen genom att byta en hanterad <link> (bara det aktiva temat hämtas), sätter data-theme="{slug}" på dokumentet och sparar valfritt i localStorage. Svelte visas här; portarna för React, Vue, Angular, HTML, Nunjucks och Blazor motsvarar dem kontrakt för 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 är hela integrationen. Tangentbordsbeteendet följer WAI-ARIA APG-listboxmönstret; själva kontrollen är headless (klasskrok .theme-picker), så den tar upp vilket tema som än är aktivt.

Verifierat 2026-08-29: det här exakta kodavsnittet kompilerades mot det publicerade 0.1.1 -paketet via svelte/server.

Steg 4 — Reagera på temat i din egen CSS

Eftersom hjälparen sätter data-theme på dokumentroten kan dina egna stilar förgrena sig på det: 

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

Anteckningar om serverrendering

Hjälparen gör alla DOM-skrivningar inom ramverkets mount-/effect-livscykel, så den är SSR-säker genom konstruktion. För att undvika ett flimmer vid första ritningen, rendera <link> och data-theme för det första temat på servern (till exempel från en cookie) — Svelte-hjälparens förvar levereras med ett körbart SvelteKit-cookieexempel, och de andra katalogerna dokumenterar samma mönster för sina stackar.

Nästa steg

  • Inställningshjälpare — samma mönster för språk, textstorlek, delning och datum-/tidsinmatning.
  • Bidra med ett tema — varje tema är en fristående stilmall som riktar in sig på klasskrokarna; se att bidra.

Frågor på vägen? Hjälpsidan är full av svar — och om ett steg kan bli tydligare, berätta för oss så förbättrar vi gärna handledningen.