Lily Design System™

Teme

Lilyne komponente imaju stabilne klasne kuke i nula CSS-a — pa je tema samo stilska tablica. Ovaj vodič ide od „povežite jednu datoteku“ do „neka korisnik mijenja temu tijekom izvođenja, uz trajno spremanje“.

Što ćete izraditi

Aplikacija čiji cijeli izgled korisnik može mijenjati — počevši od jedne povezane stilske tablice, a završavajući trajnim prebacivačem tema tijekom izvođenja — za otprilike 15 minuta.

Prije nego počnete

Najprije dovršite vodič za framework za svoj stog najprije, da imate mali Lily obrazac na koji ćete primijeniti temu. Sve ovdje radi u svih sedam frameworka; primjeri koda prikazuju Svelte i obični HTML.

Korak 1 — Povežite gotovu temu

themes/ direktorij sadrži 45 samostalnih stilskih tablica. Kopirajte ih u statičke resurse svoje aplikacije i povežite jednu: 

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

Istaknuto iz skupa:

  • Javni sektor — NHS England / Scotland / Wales, svaka u varijantama za pacijente i za stručnjake; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirirane dobavljačima — adobe-spectrum, mozilla-protocol.
  • Opće namjene — light, dark, nord, dracula, wireframe, corporate, synthwavei mnoge druge.

Provjerite svoj rad: ponovno učitajte stranicu. Ista oznaka koju ste izradili u vodiču za framework sada je potpuno stilizirana — gumbi, polja, oznake, fokusni prstenovi. To je učinio jedan redak HTML-a — svaka komponenta ostala je točno onakva kakva je bila.

Korak 2 — Nadjačajte bilo što

Selektori teme omotani su u :where(...)koji ima nultu specifičnost — pa svako pravilo koje napišete pobjeđuje, jednostavno: 

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

Korak 3 — Prebacivanje tijekom izvođenja s theme-picker

theme-picker pomoćnik je headless gumb-ikona + listbox koji posjeduje cijeli životni ciklus teme: učitava odabranu stilsku tablicu zamjenom jednog upravljanog <link> (dohvaća se samo aktivna tema), postavlja data-theme="{slug}" na dokument i neobavezno trajno sprema u localStorage. Ovdje je prikazan Svelte; portovi za React, Vue, Angular, HTML, Nunjucks i Blazor odgovaraju ugovor po ugovor: 

<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 cijela integracija. Ponašanje tipkovnice slijedi uzorak listboxa WAI-ARIA APG; sama je kontrola headless (klasna kuka .theme-picker), pa preuzima koja god tema bila aktivna.

Provjereno 2026-08-29: upravo je taj isječak kompiliran prema objavljenom 0.1.1 paketu preko svelte/server.

Korak 4 — Reagirajte na temu u vlastitom CSS-u

Budući da pomoćnik postavlja data-theme na korijen dokumenta, vaši vlastiti stilovi mogu se granati prema tome: 

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

Napomene o iscrtavanju na poslužitelju

Pomoćnik izvodi sve zapise u DOM unutar životnog ciklusa mount/effect frameworka, pa je po konstrukciji siguran za SSR. Kako biste izbjegli bljesak pri prvom iscrtavanju, iscrtajte na poslužitelju <link> i data-theme početne teme (na primjer iz kolačića) — repozitorij Svelte pomoćnika isporučuje izvršivi primjer kolačića za SvelteKit, a ostali katalozi dokumentiraju isti uzorak za svoje stogove.

Sljedeći koraci

  • Pomoćnici za postavke — isti uzorak za jezik, veličinu teksta, dijeljenje i unos datuma/vremena.
  • Doprinesite temom — svaka je jedna samostalna stilska tablica koja cilja klasne kuke; pogledajte doprinošenje.

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.