Lily Design System™

Motīvi

Lily komponentēm ir stabili klases āķi un nulle CSS — tātad motīvs ir tikai stilu lapa. Šī apmācība iet no „saistiet vienu datni” līdz „ļaujiet lietotājam mainīt motīvu izpildes laikā, ar saglabāšanu”.

Ko jūs izveidosiet

Lietotne, kuras visu izskatu lietotājs var mainīt — sākot ar vienu saistītu stilu lapu un beidzot ar saglabājamu motīvu pārslēdzēju izpildes laikā — apmēram 15 minūtēs.

Pirms sākat

Vispirms pabeidziet ietvara apmācību savam stekam vispirms, lai jums būtu neliela Lily veidlapa, kurai piešķirt motīvu. Viss šeit darbojas visos septiņos ietvaros; koda paraugi rāda Svelte un vienkāršu HTML.

1. solis — Saistiet gatavu motīvu

themes/ direktorija satur 45 patstāvīgas stilu lapas. Nokopējiet tās savas lietotnes statiskajos resursos un saistiet vienu: 

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

Kopas akcenti:

  • Publiskais sektors — NHS England / Scotland / Wales, katrs pacientiem un speciālistiem paredzētos variantos; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Piegādātāju iedvesmoti — adobe-spectrum, mozilla-protocol.
  • Vispārējam lietojumam — light, dark, nord, dracula, wireframe, corporate, synthwaveun daudzi citi.

Pārbaudiet savu darbu: pārlādējiet lapu. Tas pats iezīmējums, ko izveidojāt ietvara apmācībā, tagad ir pilnībā noformēts — pogas, ievades, iezīmes, fokusa gredzeni. To izdarīja viena HTML rindiņa — katra komponente palika tieši tāda, kāda bija.

2. solis — Pārrakstiet jebko

Motīva selektori ir ietīti :where(...)kam ir nulles specifiskums — tātad jebkurš jūsu uzrakstītais noteikums uzvar, vienkārši: 

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

3. solis — Pārslēgšana izpildes laikā ar theme-picker

theme-picker palīgs ir bezgalvas ikonas poga + listbox, kas pārvalda visu motīva dzīves ciklu: tas ielādē izvēlēto stilu lapu, nomainot vienu pārvaldītu <link> (tiek lejupielādēts tikai aktīvais motīvs), iestata data-theme="{slug}" dokumentā un pēc izvēles saglabā localStorage. Šeit parādīts Svelte; React, Vue, Angular, HTML, Nunjucks un Blazor porti atbilst līgums pēc līguma: 

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

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

Tā ir visa integrācija. Tastatūras uzvedība seko WAI-ARIA APG listbox modelim; pati vadīkla ir bezgalvas (klases āķis .theme-picker), tāpēc tā pārņem jebkuru aktīvo motīvu.

Pārbaudīts 2026-08-29: tieši šis fragments tika sakompilēts pret publicēto 0.1.1 paku ar svelte/server.

4. solis — Reaģējiet uz motīvu savā CSS

Tā kā palīgs iestata data-theme dokumenta saknē, jūsu pašu stili var atzaroties pēc tā: 

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

Piezīmes servera pusē attēlošanai

Palīgs veic visus DOM ierakstus ietvara mount/effect dzīves ciklā, tāpēc tas ir drošs SSR pēc konstrukcijas. Lai izvairītos no uzplaiksnījuma pirmajā zīmēšanā, attēlojiet serverī <link> un data-theme sākotnējam motīvam (piemēram, no sīkdatnes) — Svelte palīga repozitorijs piegādā izpildāmu SvelteKit sīkdatnes piemēru, un pārējie katalogi dokumentē to pašu modeli saviem steikiem.

Nākamie soļi

  • Preferenču palīgi — tas pats modelis valodai, teksta izmēram, kopīgošanai un datuma/laika ievadei.
  • Pievienojiet motīvu — katrs ir viena patstāvīga stilu lapa, kas mērķē klases āķus; skatiet piedalīšanos.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.