Lily Design System™

Tema

Komponen Lily nduwé pancingan kelas sing stabil lan nol CSS — mula tema mung lembar gaya. Tutorial iki saka "sambungna siji berkas" nganti "ayo pangguna ngganti tema nalika mlaku, disimpen".

Apa sing bakal sampeyan gawé

Aplikasi sing kabèh tampilané bisa diganti pangguna — diwiwiti saka siji lembar gaya sing disambungaké, rampung nganggo pengganti tema nalika mlaku sing tetep — kira-kira 15 menit.

Sadurunge miwiti

Rampungna dhisik tutorial kerangka kanggo tumpukan sampeyan dhisik, supaya sampeyan nduwé formulir Lily cilik kanggo diwènèhi tema. Kabèh ing kéné mlaku ing kabèh pitu kerangka; conto kode nuduhaké Svelte lan HTML biasa.

Langkah 1 — Sambungna tema sing wis siap

themes/ direktori ngemot 45 lembar gaya mandiri. Salin menyang aset statis aplikasi sampeyan lan sambungna siji: 

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

Sorotan saka set:

  • Sektor umum — NHS England / Scotland / Wales, saben siji ing varian kanggo pasién lan praktisi; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Diilhami vendor — adobe-spectrum, mozilla-protocol.
  • Tujuan umum — light, dark, nord, dracula, wireframe, corporate, synthwave, lan akèh liyané.

Priksa pagawéan sampeyan: muat maneh kaca. Markup sing padha sing sampeyan gawé ing tutorial kerangka saiki wis ditata lengkap — tombol, input, label, cincin fokus. Siji baris HTML sing nglakoni — saben komponen tetep persis kaya sadurungé.

Langkah 2 — Timpa apa wae

Pamilih tema dibungkus ing :where(...)sing nduwé spesifisitas nol — mula aturan apa wae sing sampeyan tulis menang, prasaja: 

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

Langkah 3 — Ganti nalika mlaku nganggo theme-picker

theme-picker pembantu iku tombol-ikon headless + listbox sing nduwèni kabèh siklus urip tema: ngemot lembar gaya sing dipilih kanthi ngganti siji <link> sing dikelola (mung tema aktif sing dijupuk), nyetel data-theme="{slug}" ing dokumen, lan opsional nyimpen ing localStorage. Svelte dituduhaké ing kéné; port React, Vue, Angular, HTML, Nunjucks lan Blazor cocog kontrak mawon: 

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

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

Iku kabèh integrasiné. Prilaku keyboard ngetutaké pola listbox WAI-ARIA APG; kontrol dhéwé iku headless (pancingan kelas .theme-picker), mula njupuk tema apa wae sing aktif.

Dikonfirmasi 2026-08-29: potongan persis iki dikompilasi nglawan paket 0.1.1 sing wis diterbitaké liwat svelte/server.

Langkah 4 — Nanggepi tema ing CSS sampeyan dhéwé

Amarga pembantu nyetel data-theme ing oyod dokumen, gaya sampeyan dhéwé bisa cabang miturut iku: 

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

Cathetan kanggo rendering ing server

Pembantu nindakaké kabèh panulisan DOM ing siklus urip mount/effect kerangka, mula aman kanggo SSR saka rancangan. Supaya ora ana kedhip ing lukisan pisanan, render ing server <link> lan data-theme saka tema awal (contoné saka cookie) — repositori pembantu Svelte ngirim conto cookie SvelteKit sing bisa dijalanaké, lan katalog liyané nyathet pola sing padha kanggo tumpukané.

Langkah sabanjuré

  • Pembantu preferensi — pola sing padha kanggo basa, ukuran teks, nuduhaké lan input tanggal/wektu.
  • Nyumbang tema — saben siji iku siji lembar gaya mandiri sing nargetaké pancingan kelas; deleng nyumbang.

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.