Lily Design System™

Themâu

Mae gan gydrannau Lily fachau dosbarth sefydlog a sero CSS — felly taflen arddull yn unig yw thema. Mae'r tiwtorial hwn yn mynd o "gysylltu un ffeil" i "adael i'r defnyddiwr newid thema yn ystod rhedeg, wedi'i barhau".

Beth fyddwch chi'n ei adeiladu

Ap y gall y defnyddiwr newid ei olwg gyfan — gan ddechrau gydag un daflen arddull gysylltiedig, gan orffen â newidiwr thema parhaus yn ystod rhedeg — mewn tua 15 munud.

Cyn i chi ddechrau

Gorffennwch yn gyntaf y tiwtorial fframwaith ar gyfer eich pentwr yn gyntaf, fel bod gennych ffurflen Lily fach i'w themeiddio. Mae popeth yma'n gweithio ym mhob un o'r saith fframwaith; mae'r samplau cod yn dangos Svelte a HTML syml.

Cam 1 — Cysylltu thema barod

themes/ Mae'r cyfeiriadur yn cynnwys 45 taflen arddull annibynnol. Copïwch nhw i asedau statig eich ap a chysylltwch un: 

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

Uchafbwyntiau'r set:

  • Y sector cyhoeddus — NHS England / Scotland / Wales, pob un mewn amrywiadau sy'n wynebu cleifion ac ymarferwyr; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Wedi'u hysbrydoli gan werthwyr — adobe-spectrum, mozilla-protocol.
  • Pwrpas cyffredinol — light, dark, nord, dracula, wireframe, corporate, synthwave, a llawer mwy.

Gwiriwch eich gwaith: ail-lwythwch y dudalen. Mae'r un marcio ag a adeiladoch yn y tiwtorial fframwaith bellach wedi'i steilio'n llawn — botymau, mewnbynnau, labeli, cylchoedd ffocws. Gwnaeth un llinell o HTML hynny — arhosodd pob cydran yn union fel yr oedd.

Cam 2 — Diystyru unrhyw beth

Mae dewiswyr y thema wedi'u lapio yn :where(...)sydd â phenodolrwydd sero — felly mae unrhyw reol a ysgrifennwch yn ennill, yn syml: 

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

Cam 3 — Newid yn ystod rhedeg gyda theme-picker

theme-picker mae'r cynorthwyydd yn fotwm eicon di-ben + blwch rhestr sy'n berchen ar gylch bywyd cyfan y thema: mae'n llwytho'r daflen arddull a ddewiswyd drwy gyfnewid un <link> a reolir (dim ond y thema weithredol a nôl), yn gosod data-theme="{slug}" ar y ddogfen, ac yn parhau'n ddewisol i localStorage. Dangosir Svelte yma; mae porthladdoedd React, Vue, Angular, HTML, Nunjucks a Blazor yn cyfateb contract wrth gontract: 

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

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

Dyna'r integreiddio cyfan. Mae ymddygiad y bysellfwrdd yn dilyn patrwm blwch rhestr WAI-ARIA APG; mae'r rheolydd ei hun yn ddi-ben (bachyn dosbarth .theme-picker), felly mae'n codi pa bynnag thema sy'n weithredol.

Gwiriwyd 2026-08-29: llunniwyd yr union ddarn hwn yn erbyn y pecyn 0.1.1 cyhoeddedig drwy svelte/server.

Cam 4 — Ymateb i'r thema yn eich CSS eich hun

Gan fod y cynorthwyydd yn gosod data-theme ar wraidd y ddogfen, gall eich arddulliau eich hun ganghennu arno: 

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

Nodiadau ar gyfer rendro ar y gweinydd

Mae'r cynorthwyydd yn gwneud pob ysgrifennu DOM y tu mewn i gylch bywyd mount/effect y fframwaith, felly mae'n ddiogel ar gyfer SSR yn ôl cynllun. I osgoi fflach wrth y paentiad cyntaf, rendrwch <link> a data-theme y thema gychwynnol ar y gweinydd (er enghraifft o gwci) — mae cadwrfa'r cynorthwyydd Svelte yn cludo enghraifft cwci SvelteKit y gellir ei rhedeg, ac mae'r catalogau eraill yn cofnodi'r un patrwm ar gyfer eu pentyrrau.

Y camau nesaf

  • Cynorthwywyr dewisiadau — yr un patrwm ar gyfer iaith, maint testun, rhannu a mewnbynnu dyddiad/amser.
  • Cyfrannwch thema — mae pob un yn un daflen arddull annibynnol sy'n targedu'r bachau dosbarth; gweler cyfrannu.

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.