Lily Design System™

Témy

Komponenty Lily majú stabilné triedne háčiky a nulové CSS — takže téma je len štýlová šablóna. Tento návod vedie od „pripojte jeden súbor“ k „nechajte používateľa prepínať tému za behu, s trvalým uložením“.

Čo vytvoríte

Aplikácia, ktorej celý vzhľad môže používateľ meniť — od jednej pripojenej štýlovej šablóny až po trvalo uložený prepínač tém za behu — približne za 15 minút.

Skôr než začnete

Najprv dokončite návod k frameworku pre svoj stack najprv, aby ste mali malý formulár Lily, na ktorý tému aplikujete. Všetko tu funguje vo všetkých siedmich frameworkoch; ukážky kódu ukazujú Svelte a čisté HTML.

Krok 1 — Pripojte hotovú tému

themes/ adresár obsahuje 45 samostatných štýlových šablón. Skopírujte ich do statických zdrojov svojej aplikácie a pripojte jednu: 

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

Z toho, čo sada ponúka:

  • Verejný sektor — NHS England / Scotland / Wales, každé vo variantoch pre pacientov aj pre odborníkov; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inšpirované dodávateľmi — adobe-spectrum, mozilla-protocol.
  • Univerzálne — light, dark, nord, dracula, wireframe, corporate, synthwavea mnoho ďalších.

Skontrolujte svoju prácu: znova načítajte stránku. Rovnaké značky, ktoré ste postavili v návode k frameworku, sú teraz plne ostylované — tlačidlá, vstupy, popisy, fokusové obrysy. Urobil to jeden riadok HTML — každý komponent zostal presne taký, aký bol.

Krok 2 — Prepíšte čokoľvek

Selektory tém sú obalené v :where(...)ktorá má nulovú špecifickosť — takže akékoľvek pravidlo, ktoré napíšete, vyhrá, jednoducho: 

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

Krok 3 — Prepínanie za behu pomocou theme-picker

theme-picker pomocník je bezhlavé tlačidlo s ikonou + listbox, ktorý vlastní celý životný cyklus témy: načíta vybranú štýlovú šablónu výmenou jedného spravovaného <link> (sťahuje sa len aktívna téma), nastaví data-theme="{slug}" na dokumente a voliteľne trvalo uloží do localStorage. Tu je ukázaný Svelte; porty pre React, Vue, Angular, HTML, Nunjucks a Blazor zodpovedajú zmluvu po zmluve: 

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

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

To je celá integrácia. Správanie klávesnice sleduje vzor listboxu WAI-ARIA APG; samotný ovládací prvok je bezhlavý (triedny háčik .theme-picker), takže prevezme akúkoľvek aktívnu tému.

Overené 2026-08-29: presne táto ukážka bola skompilovaná proti publikovanému balíku 0.1.1 cez svelte/server.

Krok 4 — Reagujte na tému vo vlastnom CSS

Pretože pomocník nastavuje data-theme na koreň dokumentu, vaše vlastné štýly sa podľa toho môžu vetviť: 

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

Poznámky k vykresľovaniu na serveri

Pomocník vykonáva všetky zápisy do DOM v životnom cykle mount/effect frameworku, takže je z konštrukcie bezpečný pre SSR. Aby nedošlo k zablikaniu pri prvom vykreslení, vykreslite na serveri <link> a data-theme počiatočnej témy (napríklad z cookie) — repozitár pomocníka Svelte dodáva spustiteľný príklad cookie pre SvelteKit a ostatné katalógy dokumentujú rovnaký vzor pre svoje stacky.

Ďalšie kroky

  • Pomocníci pre predvoľby — rovnaký vzor pre jazyk, veľkosť textu, zdieľanie a zadávanie dátumu/času.
  • Prispejte témou — každá je jedna samostatná štýlová šablóna cielená na triedne háčiky; pozri prispievanie.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.