Ùrlaran

Na thogas tu

Tagradh far an urrainn dhan chleachdaiche an coltas gu lèir atharrachadh — a’ tòiseachadh le aon bhileag-stoidhle ceangailte, a’ crìochnachadh le atharraichear ùrlair aig àm ruith a mhaireas — ann an timcheall air 15 mionaidean.

Mus tòisich thu

Cuir crìoch air an oideachadh frèam an toiseach airson do stac, gus am bi foirm bheag Lily agad airson ùrlar a chur oirre. Obraichidh a h-uile càil an seo anns na seachd frèamaichean; seallaidh sampaill còd Svelte agus HTML sìmplidh.

Ceum 1 — Ceangail ùrlar deiseil

Tha an themes/ tha 45 bileag-stoidhle neo-eisimeileach san eòlaire. Dèan lethbhreac dhiubh dha na stòrasan statach aig an tagradh agad agus ceangail fear:

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

Prìomh phuingean an t-seata:

• Roinn phoblach — NHS England / Scotland / Wales, gach fear ann an caochlaidhean airson euslaintich is luchd-cleachdaidh; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• Air am brosnachadh le reiceadairean — adobe-spectrum, mozilla-protocol.
• Adhbhar coitcheann — light, dark, nord, dracula, wireframe, corporate, synthwave, agus mòran eile.

Ceum 2 — Tar-sgrìobh rud sam bith

Tha roghnaichean ùrlair air an cuartachadh ann an :where(...)aig nach eil mionaideachd — agus mar sin buannaichidh riaghailt sam bith a sgrìobhas tu, gu sìmplidh:

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

Ceum 3 — Atharrachadh aig àm ruith le theme-picker

Tha an theme-picker ’S e putan-ìomhaigh + bogsa-liosta gun cheann a th’ anns a’ chuideachadh a tha a’ gabhail seilbh air cuairt-beatha slàn an ùrlair: bidh e a’ luchdadh na bileige-stoidhle taghte le bhith ag atharrachadh aon <link> air a riaghladh (chan fhaighear ach an ùrlar gnìomhach a-chaoidh), a’ suidheachadh data-theme="{slug}" air an sgrìobhainn, agus ga chumail ann an localStoragema thogras tu. Svelte air a shealltainn an seo; tha puirt React, Vue, Angular, HTML, Nunjucks agus Blazor a’ freagairt cùmhnant air chùmhnant:

<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 t-amalachadh gu lèir. Tha giùlan a’ chlàr-iuchrach a’ leantainn pàtran bogsa-liosta WAI-ARIA APG; tha an smachd fhèin gun cheann (crochadh clas .theme-picker), agus mar sin bidh e a’ togail ge bith dè an t-ùrlar a tha gnìomhach.

Ceum 4 — Freagair don ùrlar sa CSS agad fhèin

Leis gu bheil an cuideachadh a’ suidheachadh data-theme air freumh an sgrìobhainn, faodaidh na stoidhlean agad fhèin geugachadh air:

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

Notaichean airson reandaradh frithealaiche

Bidh an cuideachadh a’ dèanamh a h-uile sgrìobhadh DOM taobh a-staigh cuairt-beatha mount/effect an fhrèam, agus mar sin tha e sàbhailte do SSR le dealbhadh. Gus priobadh a sheachnadh air a’ chiad pheantadh, reandaraich <link> agus data-theme an ùrlair tòiseachaidh air an fhrithealaiche (mar eisimpleir bho cookie) — tha stòr cuideachaidh Svelte a’ lìbhrigeadh eisimpleir cookie SvelteKit a ghabhas ruith, agus tha na catalogan eile a’ clàradh an aon phàtrain airson na stacan aca.

Na ceumannan a leanas

• Cuideachaidhean roghainnean — an aon phàtran airson cànan, meud teacsa, co-roinn, agus cur-a-steach cinn-latha/ama.
• Cuir ùrlar ris — tha gach fear na bhileag-stoidhle neo-eisimeileach a’ targaideachadh nan crochaidhean clas; faic cur-ris.

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.