Lily Design System™

Témák

A Lily komponenseinek stabil osztálykampóik vannak és nulla CSS — így egy téma csak egy stíluslap. Ez az oktatóanyag az „egy fájl hivatkozásától” a „hagyd, hogy a felhasználó futásidőben témát váltson, tartósan elmentve” állapotig vezet.

Mit fogsz építeni

Egy alkalmazás, amelynek a teljes megjelenését a felhasználó megváltoztathatja — egyetlen hivatkozott stíluslappal kezdve, tartós futásidejű témaváltóval végezve — nagyjából 15 perc alatt.

Mielőtt elkezdenéd

Előbb fejezd be a keretrendszer-oktatóanyagot a saját technológiai készletedhez először, hogy legyen egy kis Lily-űrlapod a témázáshoz. Itt minden működik mind a hét keretrendszerben; a kódminták Svelte-et és sima HTML-t mutatnak.

1. lépés — Hivatkozz egy kész témára

themes/ könyvtár 45 önálló stíluslapot tartalmaz. Másold őket az alkalmazásod statikus erőforrásai közé, és hivatkozz egyre: 

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

A készlet kiemelései:

  • Közszféra — NHS England / Scotland / Wales, mindegyik betegközpontú és szakemberközpontú változatban; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Szállítók által ihletett — adobe-spectrum, mozilla-protocol.
  • Általános célú — light, dark, nord, dracula, wireframe, corporate, synthwaveés még sok más.

Ellenőrizd a munkádat: töltsd újra az oldalt. Ugyanaz a jelölés, amelyet a keretrendszer-oktatóanyagban építettél, most teljesen stílusos — gombok, mezők, címkék, fókuszgyűrűk. Egyetlen HTML-sor tette — minden komponens pontosan olyan maradt, amilyen volt.

2. lépés — Írj felül bármit

A témaszelektorok ebbe vannak csomagolva: :where(...)aminek nulla a specificitása — így bármelyik szabály, amit írsz, nyer, egyszerűen: 

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

3. lépés — Futásidejű váltás a theme-pickerrel

theme-picker segéd egy fej nélküli ikongomb + listbox, amely a téma teljes életciklusát birtokolja: betölti a kiválasztott stíluslapot egyetlen felügyelt <link> cseréjével (csak az aktív témát tölti le), beállítja a data-theme="{slug}" értéket a dokumentumon, és igény szerint tartósan elmenti ide: localStorage. Itt Svelte látható; a React, Vue, Angular, HTML, Nunjucks és Blazor portok szerződésről szerződésre megfelelnek: 

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

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

Ez a teljes integráció. A billentyűzet-viselkedés a WAI-ARIA APG listbox-mintát követi; maga a vezérlő fej nélküli (osztálykampó .theme-picker), így átveszi, bármelyik téma aktív.

Ellenőrizve 2026-08-29: pontosan ez a kódrészlet le lett fordítva a közzétett 0.1.1 csomaggal szemben ezzel: svelte/server.

4. lépés — Reagálj a témára a saját CSS-edben

Mivel a segéd beállítja a data-theme értéket a dokumentum gyökerén, a saját stílusaid is elágazhatnak rá: 

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

Megjegyzések a szerveroldali rendereléshez

A segéd minden DOM-írást a keretrendszer mount/effect életciklusán belül végez, így szerkezetéből adódóan SSR-biztonságos. Az első kirajzolás villanásának elkerüléséhez renderelj a szerveren <link> és data-theme a kezdeti témához (például egy sütiből) — a Svelte segéd tárolója futtatható SvelteKit sütipéldát tartalmaz, a többi katalógus pedig ugyanezt a mintát dokumentálja a saját technológiai készletéhez.

További lépések

  • Beállítási segédek — ugyanaz a minta a nyelvhez, szövegmérethez, megosztáshoz és dátum-/időbevitelhez.
  • Járulj hozzá egy témával — mindegyik egy önálló stíluslap, amely az osztálykampókat célozza; lásd a közreműködést.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.