Lily Design System™

Témata

Komponenty Lily mají stabilní třídní háčky a nulové CSS — takže téma je jen stylopis. Tento návod vede od „připojte jeden soubor“ k „nechte uživatele přepínat téma za běhu, s trvalým uložením“.

Co vytvoříte

Aplikace, jejíž celý vzhled může uživatel měnit — od jednoho připojeného stylopisu až po trvale uložený přepínač témat za běhu — zhruba za 15 minut.

Než začnete

Nejprve dokončete návod k frameworku pro svůj stack nejdřív, ať máte malý formulář Lily, na který téma aplikujete. Vše zde funguje ve všech sedmi frameworcích; ukázky kódu ukazují Svelte a čisté HTML.

Krok 1 — Připojte hotové téma

themes/ adresář obsahuje 45 samostatných stylopisů. Zkopírujte je do statických zdrojů své aplikace a připojte jeden: 

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

Z toho, co sada nabízí:

  • Veřejný sektor — NHS England / Scotland / Wales, každé ve variantách pro pacienty i pro odborníky; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirovaná dodavateli — adobe-spectrum, mozilla-protocol.
  • Univerzální — light, dark, nord, dracula, wireframe, corporate, synthwavea mnoho dalších.

Zkontrolujte svou práci: znovu načtěte stránku. Stejné značky, které jste postavili v návodu k frameworku, jsou teď plně ostylované — tlačítka, vstupy, štítky, fokusové obruby. Udělal to jeden řádek HTML — každá komponenta zůstala přesně taková, jaká byla.

Krok 2 — Přepište cokoli

Selektory témat jsou obaleny v :where(...)která má nulovou specifičnost — takže jakékoli pravidlo, které napíšete, vyhraje, prostě: 

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

Krok 3 — Přepínání za běhu pomocí theme-picker

theme-picker pomocník je bezhlavé tlačítko s ikonou + listbox, který vlastní celý životní cyklus tématu: načte vybraný stylopis výměnou jednoho spravovaného <link> (stahuje se jen aktivní téma), nastaví data-theme="{slug}" na dokumentu a volitelně trvale uloží do localStorage. Zde je ukázán Svelte; porty pro React, Vue, Angular, HTML, Nunjucks a Blazor odpovídají smlouvu po smlouvě: 

<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á integrace. Chování klávesnice sleduje vzor listboxu WAI-ARIA APG; samotný ovládací prvek je bezhlavý (třídní háček .theme-picker), takže převezme jakékoli aktivní téma.

Ověřeno 2026-08-29: přesně tato ukázka byla zkompilována proti publikovanému balíčku 0.1.1 přes svelte/server.

Krok 4 — Reagujte na téma ve vlastním CSS

Protože pomocník nastavuje data-theme na kořen dokumentu, vaše vlastní styly se podle toho mohou větvit: 

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

Poznámky k vykreslování na serveru

Pomocník provádí všechny zápisy do DOM v životním cyklu mount/effect frameworku, takže je z konstrukce bezpečný pro SSR. Aby nedošlo k probliknutí při prvním vykreslení, vykreslete na serveru <link> a data-theme počátečního tématu (například z cookie) — repozitář pomocníka Svelte dodává spustitelný příklad cookie pro SvelteKit a ostatní katalogy dokumentují stejný vzor pro své stacky.

Další kroky

  • Pomocníci pro předvolby — stejný vzor pro jazyk, velikost textu, sdílení a zadávání data/času.
  • Přispějte tématem — každé je jeden samostatný stylopis cílící na třídní háčky; viz přispívání.

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.