Theming

Ang bubuuin mo

Isang app na ang buong hitsura ay mababago ng user — nagsisimula sa isang naka-link na stylesheet, nagtatapos sa isang nananatiling runtime na theme switcher — sa humigit-kumulang 15 minuto.

Bago ka magsimula

Tapusin muna ang tutorial ng framework muna para sa iyong stack, para may maliit kang Lily form na lalagyan ng tema. Gumagana ang lahat dito sa lahat ng pitong framework; Svelte at payak na HTML ang ipinapakita ng mga sample ng code.

Hakbang 1 — Mag-link ng handa nang tema

Ang themes/ ang direktoryo ay may 45 standalone na stylesheet. Kopyahin ang mga ito sa mga static asset ng app mo at mag-link ng isa:

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

Mga tampok ng hanay:

• Pampublikong sektor — NHS England / Scotland / Wales, bawat isa sa mga variant para sa pasyente at practitioner; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• Inspirasyon ng vendor — adobe-spectrum, mozilla-protocol.
• Pangkalahatang gamit — light, dark, nord, dracula, wireframe, corporate, synthwave, at marami pang iba.

Hakbang 2 — I-override ang anuman

Nakabalot ang mga selector ng tema sa :where(...)na may zero na specificity — kaya nananalo ang anumang rule na isusulat mo, simple lang:

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

Hakbang 3 — Runtime na pagpapalit gamit ang theme-picker

Ang theme-picker ang helper ay isang headless na icon-button + listbox na may-ari ng buong lifecycle ng tema: nilo-load nito ang napiling stylesheet sa pamamagitan ng pagpapalit ng isang pinamamahalaang <link> (ang aktibong tema lang ang kinukuha), itinatakda ang data-theme="{slug}" sa dokumento, at opsyonal na nagpe-persist sa localStorage. Svelte ang ipinapakita rito; tumutugma ang mga port ng React, Vue, Angular, HTML, Nunjucks, at Blazor kontrata-kontrata:

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

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

Iyon na ang buong integrasyon. Sinusunod ng gawi ng keyboard ang WAI-ARIA APG listbox pattern; headless ang kontrol mismo (class hook .theme-picker), kaya kinukuha nito kung anong tema ang aktibo.

Hakbang 4 — Tumugon sa tema sa sarili mong CSS

Dahil itinatakda ng helper ang data-theme sa root ng dokumento, maaaring sumanga rito ang sarili mong mga istilo:

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

Mga tala para sa server rendering

Ginagawa ng helper ang lahat ng DOM write sa loob ng mount/effect lifecycle ng framework, kaya ligtas ito sa SSR sa disenyo. Para maiwasan ang flash sa unang paint, i-render ang <link> at data-theme ng paunang tema sa server (halimbawa mula sa cookie) — nagpapadala ang repo ng Svelte helper ng tumatakbong SvelteKit cookie example, at idinodokumento ng ibang catalog ang parehong pattern para sa kanilang mga stack.

Mga susunod na hakbang

• Mga preference helper — ang parehong pattern para sa wika, laki ng teksto, pagbabahagi, at pagpasok ng petsa/oras.
• Mag-ambag ng tema — bawat isa ay isang standalone na stylesheet na tumututok sa mga class hook; tingnan ang pag-aambag.

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.