Lily Design System™

Teemat

Lily-komponenteilla on vakaat luokkakoukut ja nolla CSS:ää — joten teema on vain tyylitiedosto. Tämä opas etenee kohdasta "linkitä yksi tiedosto" kohtaan "anna käyttäjän vaihtaa teemaa ajon aikana, pysyvästi tallennettuna".

Mitä rakennat

Sovellus, jonka koko ulkoasun käyttäjä voi muuttaa — alkaen yhdestä linkitetystä tyylitiedostosta ja päättyen pysyvään ajonaikaiseen teemanvaihtajaan — noin 15 minuutissa.

Ennen kuin aloitat

Suorita ensin kehysopas ensin omalle pinollesi, jotta sinulla on pieni Lily-lomake teemoitettavaksi. Kaikki täällä toimii kaikissa seitsemässä kehyksessä; koodiesimerkit näyttävät Sveltea ja pelkkää HTML:ää.

Vaihe 1 — Linkitä valmis teema

themes/ hakemisto sisältää 45 itsenäistä tyylitiedostoa. Kopioi ne sovelluksesi staattisiin resursseihin ja linkitä yksi: 

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

Joukon kohokohtia:

  • Julkinen sektori — NHS England / Scotland / Wales, kukin potilas- ja ammattilaissuuntautuneina muunnelmina; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Toimittajien inspiroimat — adobe-spectrum, mozilla-protocol.
  • Yleiskäyttöiset — light, dark, nord, dracula, wireframe, corporate, synthwaveja monia muita.

Tarkista työsi: lataa sivu uudelleen. Sama merkintä, jonka rakensit kehysoppaassa, on nyt täysin tyylitelty — painikkeet, kentät, nimiöt, kohdistusrenkaat. Yksi HTML-rivi teki sen — jokainen komponentti pysyi täsmälleen entisellään.

Vaihe 2 — Ohita mikä tahansa

Teemavalitsimet on kääritty :where(...)jolla on nolla spesifisyyttä — joten mikä tahansa kirjoittamasi sääntö voittaa, yksinkertaisesti: 

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

Vaihe 3 — Vaihto ajon aikana theme-pickerillä

theme-picker apuväline on headless-kuvakepainike + listbox, joka omistaa koko teeman elinkaaren: se lataa valitun tyylitiedoston vaihtamalla yhden hallitun <link> -elementin (vain aktiivinen teema haetaan), asettaa data-theme="{slug}" dokumenttiin ja tallentaa halutessa pysyvästi kohteeseen localStorage. Tässä näytetään Svelte; React-, Vue-, Angular-, HTML-, Nunjucks- ja Blazor-portit vastaavat sopimus sopimukselta: 

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

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

Siinä koko integraatio. Näppäimistökäyttäytyminen noudattaa WAI-ARIA APG -listbox-mallia; itse ohjain on headless (luokkakoukku .theme-picker), joten se omaksuu minkä tahansa aktiivisen teeman.

Varmistettu 2026-08-29: tämä täsmällinen koodinpätkä käännettiin julkaistua 0.1.1 -pakettia vastaan komennolla svelte/server.

Vaihe 4 — Reagoi teemaan omassa CSS:ssäsi

Koska apuväline asettaa data-theme dokumentin juureen, omat tyylisi voivat haarautua sen mukaan: 

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

Huomioita palvelinrenderöintiin

Apuväline tekee kaikki DOM-kirjoitukset kehyksen mount-/effect-elinkaaressa, joten se on rakenteeltaan SSR-turvallinen. Välttääksesi välähdyksen ensimmäisessä maalauksessa renderöi alkuteeman <link> ja data-theme palvelimella (esimerkiksi evästeestä) — Svelte-apuvälineen repossa on ajettava SvelteKit-evästeesimerkki, ja muut luettelot dokumentoivat saman mallin omille pinoilleen.

Seuraavat askeleet

  • Asetusapuvälineet — sama malli kielelle, tekstikoolle, jaolle ja päivämäärän/ajan syötölle.
  • Lahjoita teema — kukin on yksi itsenäinen tyylitiedosto, joka kohdistuu luokkakoukkuihin; katso osallistuminen.

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.