Lily Design System™

Tebelyow

Darnow Lily a dhon krogow klass stabel ha CSS hwath — rag henna tebel yw unn folen-stil hepken. An dyskans ma a gerdh dhiworth “kevrewgh unn restren” dhe “gadewgh an devnydhyer dhe chanjya tebelyow y'n termyn-dyrghas, gwithys”.

Pyth a wrewgh drehevel

App may hyll an devnydhyer chanjya y semlant kowl — ow talleth gans unn folen-stil kevrys, ow tiwedha gans chanjyer tebel y'n termyn-dyrghas a bes — yn a-dro dhe 15 mynysenn.

Kyns dalleth

Gorfennewgh an dyskans framwyth kynsa rag dha stakk, may hyllowgh kafos furv Lily byghan dhe worra tebel warnodho. Pubtra omma a ober yn oll an seyth framwyth; sampylyow koodh a dhyskwedh Svelte ha HTML plen.

Kamm 1 — Kevrewgh tebel parys

An themes/ a'n jeves 45 folen-stil dre-honan. Kopiewgh anedha dhe asetow stedhek dha app ha kevrewgh onan: 

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

Pennvarghow an set:

  • Sektour poblek — NHS England / Scotland / Wales, pub onan yn versyonow rag klavyoryon ha gwithyoryon; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Enspyrys gans gwerther — adobe-spectrum, mozilla-protocol.
  • Amkan kenedhlek — light, dark, nord, dracula, wireframe, corporate, synthwave, ha lies moy.

Hwithrewgh dha oberenn: hwithrewgh an folen. An keth markup a wrussowgh y'n dyskans framwyth yw lemmyn stylys yn tien — bottonow, mewnosow, lavellow, kylghow fokus. Unn linenn a HTML a wrug henna — pub darn a driga yn ewn fatell o.

Kamm 2 — Gorholewgh peth vyth

Dewisyoryon tebel yw lappys yn :where(...)neb a'n jeves arbennigrwydh nagonan — rag henna peub reyn a skrifowgh a wayn, plen ha splann: 

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

Kamm 3 — Chanj y'n termyn-dyrghas gans theme-picker

An theme-picker an gweresor yw botton-ikon + listbox heb pen a berth kylgh-bewnans kowl an tebel: ev a gar an folen-stil dewisys dre chanjya unn <link> governys (unnik an tebel gweythys a vydh bythkweth kyrghys), a sett data-theme="{slug}" war an skrif, ha yn kuntellys a with dhe localStorage. Svelte yw dyskwedhys omma; porthow React, Vue, Angular, HTML, Nunjucks, ha Blazor a gessenva kevambos orth kevambos: 

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

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

Henna yw an kesstrewyans kowl. Hwedhel klavyer a sew patrom listbox WAI-ARIA APG; an kontroll y honan yw heb pen (krok klass .theme-picker), rag henna ev a gemmer pynag tebel a vo gweythys.

Gwiriys 2026-08-29: an snippet ewn ma a veu kesolyes orth an pakkya dyllys 0.1.1 dre svelte/server.

Kamm 4 — Gorthebewgh dhe'n tebel yn dha CSS dha honan

Drefen an gweresor a sett data-theme war wreydh an skrif, dha stilyow dha honan a yll gwedhya warnodho: 

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

Nottow rag dyskwedhes war servyer

An gweresor a wra oll skrifans DOM a-berth kylgh-bewnans mount/effect an framwyth, rag henna yw diogel dhe SSR dre dhrehevyans. Rag ladha splan y'n kynsa peynta, dyskwedhewgh <link> ha data-theme an tebel dallethek war an servyer (rag ensampel dhiworth cookie) — gwithva gweresor Svelte a re ensampel cookie SvelteKit kerdhus, hag an rolyansow erell a dhogyn an keth patrom rag aga stakkow.

Kammow nessa

  • Gweresoryon dewisyow — an keth patrom rag yeth, myns skrif, rannans, ha entra deiz/termyn.
  • Rewgh tebel — pub onan yw unn folen-stil dre-honan a hwel an krogow klass; gwelewgh kevrenna.

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.