Lily Design System™

Temos

„Lily“ komponentai turi stabilius klasių kablius ir nulį CSS — taigi tema yra tiesiog stilių lentelė. Šis vadovas eina nuo „susiekite vieną bylą“ iki „leiskite naudotojui keisti temą vykdymo metu, su išsaugojimu“.

Ką sukursite

Programa, kurios visą išvaizdą naudotojas gali keisti — pradedant viena susieta stilių lentele ir baigiant išsaugomu temos perjungikliu vykdymo metu — per maždaug 15 minučių.

Prieš pradedant

Pirmiausia užbaikite sistemos vadovą savo technologijų rinkiniui pirmiausia, kad turėtumėte nedidelę „Lily“ formą temai pritaikyti. Viskas čia veikia visose septyniose sistemose; kodo pavyzdžiai rodo „Svelte“ ir paprastą HTML.

1 žingsnis — Susiekite paruoštą temą

themes/ kataloge yra 45 savarankiškos stilių lentelės. Nukopijuokite jas į savo programos statinius išteklius ir susiekite vieną: 

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

Rinkinio akcentai:

  • Viešasis sektorius — NHS England / Scotland / Wales, kiekviena pacientams ir specialistams skirtomis versijomis; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Tiekėjų įkvėptos — adobe-spectrum, mozilla-protocol.
  • Bendrosios paskirties — light, dark, nord, dracula, wireframe, corporate, synthwaveir daug kitų.

Patikrinkite savo darbą: perkraukite puslapį. Tas pats žymėjimas, kurį sukūrėte sistemos vadove, dabar visiškai apipavidalintas — mygtukai, laukai, žymos, fokuso žiedai. Tai padarė viena HTML eilutė — kiekvienas komponentas liko būtent toks, koks buvo.

2 žingsnis — Pakeiskite bet ką

Temos parinkikliai apgaubti :where(...)kuris turi nulinį specifiškumą — taigi bet kuri jūsų parašyta taisyklė laimi, paprastai: 

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

3 žingsnis — Perjungimas vykdymo metu su theme-picker

theme-picker pagalbininkas yra bekūnis piktogramos mygtukas + listbox, valdantis visą temos gyvavimo ciklą: jis įkelia pasirinktą stilių lentelę pakeisdamas vieną valdomą <link> (parsisiunčiama tik aktyvi tema), nustato data-theme="{slug}" dokumente ir pasirinktinai išsaugo localStorage. Čia rodomas „Svelte“; „React“, „Vue“, „Angular“, HTML, „Nunjucks“ ir „Blazor“ portai atitinka sutartis po sutarties: 

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

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

Tai visa integracija. Klaviatūros elgesys seka WAI-ARIA APG listbox šabloną; pats valdiklis yra bekūnis (klasės kablys .theme-picker), todėl perima bet kurią aktyvią temą.

Patikrinta 2026-08-29: būtent šis fragmentas buvo sukompiliuotas pagal paskelbtą 0.1.1 paketą per svelte/server.

4 žingsnis — Reaguokite į temą savo CSS

Kadangi pagalbininkas nustato data-theme dokumento šaknyje, jūsų pačių stiliai gali šakotis pagal tai: 

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

Pastabos apie atvaizdavimą serveryje

Pagalbininkas atlieka visus DOM rašymus sistemos mount/effect gyvavimo cikle, todėl pagal konstrukciją saugus SSR. Kad išvengtumėte blykstelėjimo pirmojo piešimo metu, serveryje atvaizduokite <link> ir data-theme pradinės temos (pavyzdžiui, iš slapuko) — „Svelte“ pagalbininko saugykla pristato vykdomą „SvelteKit“ slapuko pavyzdį, o kiti katalogai dokumentuoja tą patį šabloną savo technologijų rinkiniams.

Tolesni žingsniai

  • Nuostatų pagalbininkai — tas pats šablonas kalbai, teksto dydžiui, bendrinimui ir datos/laiko įvedimui.
  • Prisidėkite tema — kiekviena yra viena savarankiška stilių lentelė, taikanti klasių kablius; žr. prisidėjimą.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.