Lily Design System™

Temi

Il-komponenti ta' Lily għandhom ganċijiet tal-klassi stabbli u żero CSS — allura tema hija sempliċement stylesheet. Din it-tutorja tmur minn "evita fajl wieħed" għal "ħalli l-utent ibiddel it-tema waqt it-tħaddim, b'persistenza".

X'se tibni

App li d-dehra kollha tagħha l-utent jista' jibdel — jibda b'stylesheet wieħed marbut, jintemm b'bidla persistenti tat-tema waqt it-tħaddim — f'madwar 15-il minuta.

Qabel ma tibda

Lesti l-ewwel it-tutorja tal-framework għall-istack tiegħek l-ewwel, biex ikollok formola żgħira ta' Lily li tagħtiha tema. Kollox hawn jaħdem fis-seba' frameworks kollha; l-eżempji tal-kodiċi juru Svelte u HTML sempliċi.

Pass 1 — Evita tema lesta

themes/ id-direttorju fih 45 stylesheet indipendenti. Ikkopjahom fl-assi statiċi tal-app tiegħek u evita wieħed: 

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

Għoli tas-sett:

  • Settur pubbliku — NHS England / Scotland / Wales, kull wieħed f'verżjonijiet għall-pazjenti u għall-professjonisti; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Ispirati minn fornituri — adobe-spectrum, mozilla-protocol.
  • Użu ġenerali — light, dark, nord, dracula, wireframe, corporate, synthwave, u ħafna oħra.

Iċċekkja x-xogħol tiegħek: erġa' ttella' l-paġna. L-istess markup li bnejt fit-tutorja tal-framework issa huwa bi stil sħiħ — buttuni, inputs, tikketti, ċrieki tal-focus. Linja HTML waħda għamlet dan — kull komponent baqa' eżattament kif kien.

Pass 2 — Issostitwixxi kwalunkwe ħaġa

L-għażlieri tat-tema huma mgeżwra fi :where(...)li għandu speċifiċità żero — allura kwalunkwe regola li tikteb tirbaħ, sempliċement: 

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

Pass 3 — Bdil waqt it-tħaddim b'theme-picker

theme-picker l-għajnuna hija buttuna-ikona headless + listbox li tgawdi ċ-ċiklu sħiħ tal-ħajja tat-tema: tgħabbi l-istylesheet magħżul billi tbiddel <link> ġestit wieħed (it-tema attiva biss tinġieb), tiffissa data-theme="{slug}" fuq id-dokument u b'għażla żżomm f' localStorage. Hawn jidher Svelte; il-ports għal React, Vue, Angular, HTML, Nunjucks u Blazor jaqblu kuntratt b'kuntratt: 

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

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

Dik hija l-integrazzjoni kollha. Il-mġiba tat-tastiera ssegwi l-mudell listbox WAI-ARIA APG; il-kontroll innifsu huwa headless (ganċ tal-klassi .theme-picker), allura jieħu kwalunkwe tema li tkun attiva.

Ivverifikat fl-2026-08-29: dan is-snippet eżatt ġie kkompilat kontra l-pakkett ippubblikat 0.1.1 permezz ta' svelte/server.

Pass 4 — Irreaġixxi għat-tema fis-CSS tiegħek stess

Peress li l-għajnuna tiffissa data-theme fuq l-għerq tad-dokument, l-istili tiegħek stess jistgħu jiffurkaw fuqu: 

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

Noti għar-rendering fuq is-server

L-għajnuna tagħmel il-kitbiet kollha fid-DOM fiċ-ċiklu tal-ħajja mount/effect tal-framework, allura hija sigura għal SSR b'mod strutturali. Biex tevita tleqqija fl-ewwel pittura, irrendi fuq is-server <link> u data-theme tat-tema inizjali (pereżempju minn cookie) — ir-repożitorju tal-għajnuna Svelte jinkludi eżempju li jista' jitmexxa ta' cookie għal SvelteKit, u l-kataloġi l-oħra jiddokumentaw l-istess mudell għall-istacks tagħhom.

Passi li jmiss

  • Għajnuniet tal-preferenzi — l-istess mudell għal-lingwa, id-daqs tat-test, il-qsim u d-dħul tad-data/ħin.
  • Ikkontribwixxi tema — kull waħda hija stylesheet indipendenti waħda li timmira lejn il-ganċijiet tal-klassi; ara il-kontribuzzjoni.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.