Teme
Componentele Lily au cârlige de clasă stabile și zero CSS — deci o temă este doar o foaie de stil. Acest tutorial merge de la „leagă un fișier” la „lasă utilizatorul să schimbe tema în timpul rulării, cu persistență”.
Ce vei construi
O aplicație al cărei aspect întreg îl poate schimba utilizatorul — pornind de la o singură foaie de stil legată și ajungând la un comutator de teme persistent în timpul rulării — în aproximativ 15 minute.
Înainte să începi
Termină mai întâi tutorialul frameworkului pentru stiva ta mai întâi, ca să ai un mic formular Lily de tematizat. Tot ce este aici funcționează în toate cele șapte frameworkuri; exemplele de cod arată Svelte și HTML simplu.
Pasul 1 — Leagă o temă gata făcută
themes/ directorul conține 45 de foi de stil independente. Copiază-le în resursele statice ale aplicației și leagă una:
<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />Repere ale setului:
-
Sectorul public — NHS England / Scotland / Wales, fiecare în variante pentru pacienți și pentru practicieni; GOV.UK (
united-kingdom-government-digital-service); USWDS (united-states-web-design-system). - Inspirate de furnizori —
adobe-spectrum,mozilla-protocol. -
Uz general —
light,dark,nord,dracula,wireframe,corporate,synthwaveși multe altele.
Verifică-ți munca: reîncarcă pagina. Același marcaj pe care l-ai construit în tutorialul frameworkului este acum complet stilizat — butoane, câmpuri, etichete, inele de focalizare. O singură linie de HTML a făcut asta — fiecare componentă a rămas exact cum era.
Pasul 2 — Suprascrie orice
Selectorii temei sunt învăluiți în :where(...)care are specificitate zero — deci orice regulă scrii câștigă, simplu:
/* After the theme link: your brand button, everything else themed */
.button {
background: #7c3aed;
border-radius: 9999px;
}Pasul 3 — Comutare în timpul rulării cu theme-picker
theme-picker ajutorul este un buton-pictogramă headless + listbox care deține întregul ciclu de viață al temei: încarcă foaia de stil aleasă schimbând un singur <link>
gestionat (doar tema activă este descărcată), setează
data-theme="{slug}" pe document și, opțional, persistă în localStorage. Aici e arătat Svelte; porturile pentru React, Vue, Angular, HTML, Nunjucks și Blazor corespund contract cu contract:
<script>
import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>
<ThemePicker
label="Theme"
themesUrl="/assets/themes/"
themes={["light", "dark", "nord", "wireframe"]}
storageKey="my-app-theme"
/>
Asta e toată integrarea. Comportamentul tastaturii urmează tiparul listbox WAI-ARIA APG; controlul în sine este headless (cârlig de clasă
.theme-picker), deci preia orice temă este activă.
Verificat la 2026-08-29: acest fragment exact a fost compilat față de pachetul publicat 0.1.1 prin
svelte/server.
Pasul 4 — Reacționează la temă în propriul CSS
Deoarece ajutorul setează data-theme pe rădăcina documentului, propriile tale stiluri se pot ramifica după el:
[data-theme="dark"] .site-logo { filter: invert(1); }Note pentru randarea pe server
Ajutorul face toate scrierile în DOM în ciclul de viață mount/effect al frameworkului, deci este sigur pentru SSR prin construcție. Pentru a evita o clipire la prima desenare, randează <link> și
data-theme al temei inițiale pe server (de exemplu dintr-un cookie) — depozitul ajutorului Svelte livrează un exemplu executabil de cookie SvelteKit, iar celelalte cataloage documentează același tipar pentru stivele lor.
Pașii următori
- Ajutoare pentru preferințe — același tipar pentru limbă, dimensiunea textului, partajare și introducerea datei/orei.
- Contribuie cu o temă — fiecare este o singură foaie de stil independentă care vizează cârligele de clasă; vezi contribuția.
Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.