Lily Design System™

Teme

Komponente Lily imajo stabilne razredne kavlje in nič CSS — tema je torej samo slogovna datoteka. Ta vodnik gre od „povežite eno datoteko“ do „naj uporabnik med izvajanjem zamenja temo, s trajnim shranjevanjem“.

Kaj boste ustvarili

Aplikacija, katere celoten videz lahko uporabnik spremeni — od ene povezane slogovne datoteke do trajno shranjenega preklopnika tem med izvajanjem — v približno 15 minutah.

Preden začnete

Najprej dokončajte vodnik za ogrodje za svoj sklad najprej, da imate majhen obrazec Lily, ki mu boste dali temo. Vse tukaj deluje v vseh sedmih ogrodjih; vzorci kode prikazujejo Svelte in navaden HTML.

Korak 1 — Povežite pripravljeno temo

themes/ mapa vsebuje 45 samostojnih slogovnih datotek. Kopirajte jih v statična sredstva svoje aplikacije in povežite eno: 

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

Poudarki nabora:

  • Javni sektor — NHS England / Scotland / Wales, vsaka v različicah za bolnike in za strokovnjake; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Navdihnjene z dobavitelji — adobe-spectrum, mozilla-protocol.
  • Splošna uporaba — light, dark, nord, dracula, wireframe, corporate, synthwavein še mnogo drugih.

Preverite svoje delo: znova naložite stran. Isto označevanje, ki ste ga zgradili v vodniku za ogrodje, je zdaj povsem oblikovano — gumbi, vnosi, oznake, fokusni obroči. To je naredila ena vrstica HTML — vsaka komponenta je ostala natanko taka, kot je bila.

Korak 2 — Preglasite karkoli

Izbirniki teme so oviti v :where(...)ki ima ničelno specifičnost — zato vsako pravilo, ki ga napišete, zmaga, preprosto: 

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

Korak 3 — Preklapljanje med izvajanjem s theme-picker

theme-picker pomočnik je brezglavi gumb z ikono + listbox, ki lastni celoten življenjski cikel teme: naloži izbrano slogovno datoteko z zamenjavo enega upravljanega <link> (prenese se le aktivna tema), nastavi data-theme="{slug}" na dokumentu in neobvezno trajno shrani v localStorage. Tukaj je prikazan Svelte; vrati za React, Vue, Angular, HTML, Nunjucks in Blazor ustrezajo pogodbo za pogodbo: 

<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 celotna integracija. Vedenje tipkovnice sledi vzorcu listboxa WAI-ARIA APG; sam kontrolnik je brezglav (razredni kavelj .theme-picker), zato prevzame, katera koli tema je aktivna.

Preverjeno 2026-08-29: natanko ta izrezek je bil preveden proti objavljenemu 0.1.1 paketu prek svelte/server.

Korak 4 — Odzovite se na temo v lastnem CSS

Ker pomočnik nastavi data-theme na korenu dokumenta, se lahko vaši lastni slogi razvejijo po tem: 

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

Opombe o izrisovanju na strežniku

Pomočnik vse zapise v DOM opravi znotraj življenjskega cikla mount/effect ogrodja, zato je po zasnovi varen za SSR. Da se izognete utripu ob prvem risanju, izrišite na strežniku <link> in data-theme začetne teme (na primer iz piškotka) — repozitorij pomočnika Svelte vsebuje izvedljiv primer piškotka za SvelteKit, drugi katalogi pa isti vzorec dokumentirajo za svoje sklade.

Naslednji koraki

  • Pomočniki za nastavitve — isti vzorec za jezik, velikost besedila, deljenje in vnos datuma/časa.
  • Prispevajte temo — vsaka je ena samostojna slogovna datoteka, ki cilja razredne kavlje; glejte prispevanje.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.