Lily Design System™

Motywy

Komponenty Lily mają stabilne haczyki klas i zero CSS — więc motyw to po prostu arkusz stylów. Ten samouczek prowadzi od „podlinkuj jeden plik” do „pozwól użytkownikowi przełączać motyw w czasie działania, z zapamiętywaniem”.

Co zbudujesz

Aplikacja, której cały wygląd użytkownik może zmienić — zaczynając od jednego podlinkowanego arkusza stylów, a kończąc na trwałym przełączniku motywu w czasie działania — w około 15 minut.

Zanim zaczniesz

Najpierw ukończ samouczek frameworka dla swojego stosu najpierw, żebyś miał mały formularz Lily do nałożenia motywu. Wszystko tutaj działa we wszystkich siedmiu frameworkach; przykłady kodu pokazują Svelte i czysty HTML.

Krok 1 — Podlinkuj gotowy motyw

themes/ katalog zawiera 45 samodzielnych arkuszy stylów. Skopiuj je do statycznych zasobów aplikacji i podlinkuj jeden: 

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

Najważniejsze z zestawu:

  • Sektor publiczny — NHS England / Scotland / Wales, każdy w wariantach dla pacjentów i dla praktyków; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirowane dostawcami — adobe-spectrum, mozilla-protocol.
  • Ogólnego przeznaczenia — light, dark, nord, dracula, wireframe, corporate, synthwavei wiele innych.

Sprawdź swoją pracę: odśwież stronę. Ten sam znacznik, który zbudowałeś w samouczku frameworka, jest teraz w pełni ostylowany — przyciski, pola, etykiety, pierścienie fokusu. Zrobił to jeden wiersz HTML — każdy komponent pozostał dokładnie taki, jaki był.

Krok 2 — Nadpisz cokolwiek

Selektory motywów są opakowane w :where(...)które ma zerową swoistość — więc każda reguła, którą napiszesz, wygrywa, po prostu: 

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

Krok 3 — Przełączanie w czasie działania przez theme-picker

theme-picker pomocnik to bezstylowy przycisk-ikona z listboksem, który posiada cały cykl życia motywu: ładuje wybrany arkusz stylów, podmieniając jeden zarządzany <link> (pobierany jest tylko aktywny motyw), ustawia data-theme="{slug}" na dokumencie i opcjonalnie zapisuje w localStorage. Tu pokazano Svelte; porty dla Reacta, Vue, Angulara, HTML, Nunjucks i Blazora odpowiadają mu kontrakt po kontrakcie: 

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

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

To cała integracja. Działanie klawiatury podąża za wzorcem listboksa WAI-ARIA APG; sama kontrolka jest bezstylowa (haczyk klasy .theme-picker), więc przejmuje dowolny aktywny motyw.

Zweryfikowano 2026-08-29: dokładnie ten fragment został skompilowany względem opublikowanego pakietu 0.1.1 przez svelte/server.

Krok 4 — Reaguj na motyw we własnym CSS

Ponieważ pomocnik ustawia data-theme na korzeniu dokumentu, twoje własne style mogą się według tego rozgałęziać: 

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

Uwagi dotyczące renderowania po stronie serwera

Pomocnik wykonuje wszystkie zapisy do DOM w cyklu życia mount/effect frameworka, więc jest bezpieczny dla SSR z założenia. Aby uniknąć błysku przy pierwszym malowaniu, wyrenderuj <link> i data-theme motywu początkowego na serwerze (na przykład z ciasteczka) — repozytorium pomocnika Svelte zawiera uruchamialny przykład ciasteczek SvelteKit, a pozostałe katalogi dokumentują ten sam wzorzec dla swoich stosów.

Następne kroki

  • Pomocniki preferencji — ten sam wzorzec dla języka, rozmiaru tekstu, udostępniania i wprowadzania daty/godziny.
  • Wnieś motyw — każdy to jeden samodzielny arkusz stylów celujący w haczyki klas; zobacz współtworzenie.

Pytania po drodze? Strona pomocy jest pełna odpowiedzi — a jeśli jakiś krok mógłby być jaśniejszy, daj nam znać a chętnie ulepszymy samouczek.