Lily Design System™

Þemu

Lily-íhlutir bera stöðuga klasakróka og ekkert CSS — svo þema er einfaldlega stílblað. Þetta kennsluefni fer frá „tengdu eina skrá“ til „leyfðu notandanum að skipta um þema á keyrslutíma, vistað“.

Það sem þú munt byggja

Forrit þar sem notandinn getur breytt öllu útlitinu — byrjar með einu tengdu stílblaði og endar með vistuðum þemaskipti á keyrslutíma — á um 15 mínútum.

Áður en þú byrjar

Ljúktu við rammakennsluefnið fyrst fyrir þinn stafla, svo þú hafir lítið Lily-eyðublað til að setja þema á. Allt hér virkar í öllum rammanum sjö; kóðadæmin sýna Svelte og hreint HTML.

Skref 1 — Tengdu tilbúið þema

themes/ mappan inniheldur 45 sjálfstæð stílblöð. Afritaðu þau í kyrrstæðar eignir forritsins og tengdu eitt: 

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

Hápunktar settsins:

  • Opinber geiri — NHS England / Scotland / Wales, hvert í útgáfum fyrir sjúklinga og fagfólk; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Innblásið af söluaðilum — adobe-spectrum, mozilla-protocol.
  • Almenn notkun — light, dark, nord, dracula, wireframe, corporate, synthwave, og mörg fleiri.

Athugaðu verkið: endurhladdu síðuna. Sama markup og þú byggðir í rammakennsluefninu er nú fullstílað — hnappar, innsláttarreitir, merkimiðar, fókushringir. Ein lína af HTML gerði það — hver íhlutur var nákvæmlega eins og hann var.

Skref 2 — Hnekktu hverju sem er

Þemaveljarar eru vafðir í :where(...)sem hefur núll sértækni — svo hvaða regla sem þú skrifar vinnur, einfaldlega: 

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

Skref 3 — Skipti á keyrslutíma með theme-picker

theme-picker hjálpartækið er höfuðlaus táknhnappur + valmöguleikalisti sem á allan lífsferil þemans: það hleður völdu stílblaði með því að skipta um eitt stýrt <link> (aðeins virka þemað er nokkurn tíma sótt), stillir data-theme="{slug}" á skjalið og vistar valfrjálst í localStorage. Svelte er sýnt hér; React-, Vue-, Angular-, HTML-, Nunjucks- og Blazor-færslur samsvara samningur fyrir samning: 

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

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

Þetta er öll samþættingin. Lyklaborðshegðun fylgir WAI-ARIA APG valmöguleikalistamynstrinu; stýringin sjálf er höfuðlaus (klasakrókur .theme-picker), svo hún tekur upp hvaða þema sem er virkt.

Staðfest 2026-08-29: þetta nákvæma snifs var þýtt gegn útgefna 0.1.1 pakkanum í gegnum svelte/server.

Skref 4 — Bregðast við þemanu í þínu eigin CSS

Þar sem hjálpartækið stillir data-theme á rót skjalsins geta þínir eigin stílar greinst eftir því: 

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

Athugasemdir um miðlarabirtingu

Hjálpartækið framkvæmir öll DOM-skrif innan mount/effect lífsferils rammans, svo það er SSR-öruggt frá grunni. Til að forðast blikk við fyrstu málningu skaltu birta <link> og data-theme upphafsþemans á miðlaranum (til dæmis úr köku) — Svelte-hjálpargeymslan sendir keyranlegt SvelteKit-kökudæmi og hin söfnin skjalfesta sama mynstur fyrir sína stafla.

Næstu skref

  • Stillingahjálpartæki — sama mynstur fyrir tungumál, textastærð, deilingu og dagsetninga-/tímainnslátt.
  • Leggðu til þema — hvert er eitt sjálfstætt stílblað sem miðar á klasakrókana; sjá framlag.

Spurningar á leiðinni? hjálparsíðan er full af svörum — og ef skref gæti verið skýrara, segðu okkur og við bætum kennsluefnið með ánægju.