Lily Design System™

Gaiak

Lily osagaiek klase-gako egonkorrak dituzte eta CSSrik ez — beraz gai bat estilo-orri bat besterik ez da. Tutorial honek “lotu fitxategi bat”-etik “utzi erabiltzaileari gaiak exekuzio-garaian aldatzen, gordeta”-ra doa.

Zer eraikiko duzun

Erabiltzaileak itxura osoa alda dezakeen aplikazio bat — estilo-orri lotu batekin hasi eta gai-aldatzaile iraunkor batekin amaituz — 15 minutu inguruan.

Hasi aurretik

Osatu framework tutoriala lehenik zure stack-erako, Lily formulario txiki bat izan dezazun gaia emateko. Hemengo guztia zazpi framework-etan funtzionatzen du; kode-laginek Svelte eta HTML soila erakusten dituzte.

1. pausoa — Lotu prest dagoen gai bat

themes/ direktorioak 45 estilo-orri independente ditu. Kopiatu zure aplikazioaren baliabide estatikoetara eta lotu bat: 

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

Multzoaren nabarmenak:

  • Sektore publikoa — NHS England / Scotland / Wales, bakoitza pazienteentzako eta profesionalentzako aldaeretan; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Saltzaileek inspiratua — adobe-spectrum, mozilla-protocol.
  • Xede orokorra — light, dark, nord, dracula, wireframe, corporate, synthwave, eta beste asko.

Egiaztatu zure lana: birkargatu orria. Framework tutorialean eraiki zenuen markaketa bera guztiz estilatuta dago orain — botoiak, sarrerak, etiketak, foku-eraztunak. HTML lerro batek egin zuen hori — osagai bakoitzak zegoen bezala jarraitu zuen.

2. pausoa — Gainidatzi edozer

Gai-hautatzaileak hemen biltzen dira :where(...)honek espezifikotasun nulua du — beraz idazten duzun edozein arau irabazten du, sinpleki: 

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

3. pausoa — Exekuzio-garaiko aldaketa theme-picker-ekin

theme-picker laguntzailea ikono-botoi + zerrenda-koadro buru gabea da, gaiaren bizi-ziklo osoa bere gain hartzen duena: aukeratutako estilo-orria kudeatutako bat aldatuz kargatzen du <link> (gai aktiboa bakarrik eskuratzen da), ezartzen du data-theme="{slug}" dokumentuan, eta aukeran hemen gordetzen du: localStorage. Hemen Svelte erakusten da; React, Vue, Angular, HTML, Nunjucks eta Blazor portuak kontratuz kontratu datoz bat: 

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

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

Hori da integrazio osoa. Teklatu-portaerak WAI-ARIA APG zerrenda-koadro patroia jarraitzen du; kontrola bera buru gabea da (klase-gakoa .theme-picker), beraz gai aktiboa dena hartzen du.

2026-08-29an egiaztatua: snippet zehatz hau argitaratutako pakete honen aurka konpilatu zen 0.1.1 honen bidez: svelte/server.

4. pausoa — Erantzun gaiari zure CSS propioan

Laguntzaileak ezartzen duenez data-theme dokumentuaren erroan, zure estilo propioak horren arabera adar daitezke: 

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

Zerbitzari bidezko errendatzeari buruzko oharrak

Laguntzaileak DOM idazketa guztiak framework-aren mount/effect bizi-zikloaren barruan egiten ditu, beraz SSR-rako segurua da eraikuntzaz. Lehen pintaketan keinua saihesteko, errendatu hasierako gaiaren <link> eta data-theme zerbitzarian (adibidez cookie batetik) — Svelte laguntzaile-biltegiak SvelteKit cookie adibide exekutagarri bat dakar, eta beste katalogoek patroi bera dokumentatzen dute beren stack-etarako.

Hurrengo pausoak

  • Lehentasun-laguntzaileak — patroi bera hizkuntza, testu-tamaina, partekatzea eta data/ordu sarrerarako.
  • Eman gai bat — bakoitza klase-gakoak helburu dituen estilo-orri independente bat da; ikusi ekarpenak.

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.