Lily Design System™

Teemad

Lily komponentidel on stabiilsed klassikonksud ja null CSS-i — seega on teema lihtsalt laadileht. See õpetus läheb "lingi üks fail" juurest kuni "lase kasutajal teemat töö ajal vahetada, püsivalt salvestatult".

Mida sa ehitad

Rakendus, mille kogu välimust kasutaja saab muuta — alates ühest lingitud laadilehest kuni püsiva töönaegse teemavahetajani — umbes 15 minutiga.

Enne alustamist

Lõpeta esmalt raamistiku õpetus oma tehnoloogiapaki jaoks esmalt, et sul oleks väike Lily vorm teemastamiseks. Kõik siin töötab kõigis seitsmes raamistikus; koodinäited näitavad Svelte'i ja lihtsat HTML-i.

Samm 1 — Lingi valmis teema

themes/ kaust sisaldab 45 eraldiseisvat laadilehte. Kopeeri need oma rakenduse staatilistesse varadesse ja lingi üks: 

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

Komplekti tipphetked:

  • Avalik sektor — NHS England / Scotland / Wales, igaüks patsiendi- ja praktiseerijale suunatud variantides; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Tarnijatest inspireeritud — adobe-spectrum, mozilla-protocol.
  • Üldotstarbelised — light, dark, nord, dracula, wireframe, corporate, synthwaveja palju muid.

Kontrolli oma tööd: laadi leht uuesti. Sama märgistus, mille ehitasid raamistiku õpetuses, on nüüd täielikult kujundatud — nupud, sisendid, sildid, fookusrõngad. Üks HTML-i rida tegi selle — iga komponent jäi täpselt selliseks, nagu oli.

Samm 2 — Kirjuta üle mis tahes

Teema valijad on mähitud :where(...)millel on null spetsiifilisus — nii et iga sinu kirjutatud reegel võidab, lihtsalt: 

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

Samm 3 — Vahetamine töö ajal theme-pickeriga

theme-picker abiline on peata ikoonnupp + listbox, mis omab kogu teema elutsüklit: see laadib valitud laadilehe, vahetades ühe hallatud <link> (tõmmatakse ainult aktiivne teema), seab data-theme="{slug}" dokumendile ja valikuliselt salvestab püsivalt kohta localStorage. Siin on näidatud Svelte'i; Reacti, Vue, Angulari, HTML-i, Nunjucksi ja Blazori pordid vastavad lepingu haaval: 

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

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

See ongi kogu integratsioon. Klaviatuurikäitumine järgib WAI-ARIA APG listboxi mustrit; juhtelement ise on peata (klassikonks .theme-picker), nii et see võtab üle, milline teema iganes aktiivne on.

Kontrollitud 2026-08-29: just see koodilõik kompileeriti avaldatud 0.1.1 paketi vastu käsuga svelte/server.

Samm 4 — Reageeri teemale oma CSS-is

Kuna abiline seab data-theme dokumendi juurele, saavad sinu enda stiilid selle järgi hargneda: 

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

Märkmed serveri renderduse kohta

Abiline teeb kõik DOM-i kirjutamised raamistiku mount-/effect-elutsükli sees, seega on see ülesehituselt SSR-ohutu. Esimese joonistuse vilkumise vältimiseks renderda algteema <link> ja data-theme serveris (näiteks küpsisest) — Svelte'i abilise repos on käivitatav SvelteKiti küpsisenäide ja teised kataloogid dokumenteerivad sama mustri oma tehnoloogiapakkidele.

Järgmised sammud

  • Eelistuste abilised — sama muster keele, teksti suuruse, jagamise ja kuupäeva/kellaaja sisestuse jaoks.
  • Panusta teema — igaüks on üks eraldiseisev laadileht, mis sihib klassikonkse; vaata panustamine.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.