Lily Design System™

Téamaí

Tá crúcaí aicme cobhsaí agus nialas CSS ag comhpháirteanna Lily — mar sin is bileog stíle amháin é téama. Téann an teagasc seo ó "nasc comhad amháin" go "lig don úsáideoir téama a athrú ag am rite, le marthanacht".

An rud a thógfaidh tú

App a bhfuil a chuma ar fad inathraithe ag an úsáideoir — ag tosú le bileog stíle nasctha amháin agus ag críochnú le hathraitheoir téama marthanach ag am rite — i thart ar 15 nóiméad.

Sula dtosaíonn tú

Críochnaigh an teagasc creata le haghaidh do chruach ar dtús, ionas go mbeidh foirm bheag Lily agat le téama a chur uirthi. Oibríonn gach rud anseo sna seacht gcreat; léiríonn na samplaí cóid Svelte agus HTML simplí.

Céim 1 — Nasc téama réamhdhéanta

themes/ tá 45 bileog stíle neamhspleácha san eolaire. Cóipeáil iad isteach i sócmhainní statacha d'app agus nasc ceann amháin: 

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

Buaicphointí an tsraith:

  • Earnáil phoiblí — NHS England / Scotland / Wales, gach ceann i leaganacha dírithe ar othair agus ar chleachtóirí; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Spreagtha ag díoltóirí — adobe-spectrum, mozilla-protocol.
  • Úsáid ghinearálta — light, dark, nord, dracula, wireframe, corporate, synthwave, agus go leor eile.

Seiceáil d'obair: athlódáil an leathanach. Tá an marcáil chéanna a thóg tú sa teagasc creata anois go hiomlán stíl-chóirithe — cnaipí, ionchuir, lipéid, fáinní fócais. Rinne líne HTML amháin é sin — d'fhan gach comhpháirt go díreach mar a bhí.

Céim 2 — Sáraigh aon rud

Tá roghnóirí an téama fillte i :where(...)a bhfuil sainiúlacht nialasach aige — mar sin buann aon riail a scríobhann tú, go simplí: 

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

Céim 3 — Malartú ag am rite le theme-picker

theme-picker is cnaipe deilbhín gan cheann + listbox é an cúntóir a bhfuil úinéireacht aige ar thimthriall saoil iomlán an téama: luchtaíonn sé an bhileog stíle roghnaithe trí <link> bainistithe amháin a mhalartú (ní tharraingítear ach an téama gníomhach), socraíonn sé data-theme="{slug}" ar an doiciméad agus coinníonn sé go roghnach i localStorage. Taispeántar Svelte anseo; tá calafoirt React, Vue, Angular, HTML, Nunjucks agus Blazor ag teacht leis conradh i ndiaidh conartha: 

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

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

Sin an lánimeascadh. Leanann iompar an mhéarchláir an patrún listbox WAI-ARIA APG; tá an rialú féin gan cheann (crúca aicme .theme-picker), mar sin glacann sé le cibé téama atá gníomhach.

Fíoraithe 2026-08-29: tiomsaíodh an blúire cruinn seo i gcoinne an phacáiste 0.1.1 foilsithe trí svelte/server.

Céim 4 — Freagair don téama i do CSS féin

Toisc go socraíonn an cúntóir data-theme ar fhréamh an doiciméid, is féidir le do stíleanna féin brainsiú air: 

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

Nótaí do rindreáil ar an bhfreastalaí

Déanann an cúntóir gach scríobh DOM taobh istigh de thimthriall saoil mount/effect an chreata, mar sin tá sé sábháilte do SSR de réir dearaidh. Chun splanc a sheachaint ar an gcéad phéinteáil, rindreáil ar an bhfreastalaí an <link> agus data-theme den téama tosaigh (mar shampla ó fhianán) — seolann stóras an chúntóra Svelte sampla inrite fianáin SvelteKit, agus doiciméadaíonn na catalóga eile an patrún céanna dá gcruacha.

Na chéad chéimeanna eile

  • Cúntóirí sainroghanna — an patrún céanna le haghaidh teanga, méide téacs, roinnte agus iontrála dáta/ama.
  • Ranníoc téama — is bileog stíle neamhspleách amháin gach ceann a dhíríonn ar na crúcaí aicme; féach ranníoc.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.