Lily Design System™

Temalar

Lily bileşenlerinin kararlı sınıf kancaları vardır ve sıfır CSS taşırlar — yani bir tema yalnızca bir stil sayfasıdır. Bu eğitim "tek bir dosya bağlama"dan "kullanıcının çalışma anında tema değiştirmesine ve bunun kalıcı olmasına" kadar uzanır.

Ne oluşturacaksınız

Tüm görünümünü kullanıcının değiştirebildiği bir uygulama — tek bir bağlı stil sayfasıyla başlayıp kalıcı bir çalışma anı tema değiştiriciyle biten — yaklaşık 15 dakikada.

Başlamadan önce

Önce yığınınız için çerçeve eğitimini için önce yığınınızı seçin; böylece temalandıracak küçük bir Lily formunuz olur. Buradaki her şey yedi çerçevenin hepsinde çalışır; kod örnekleri Svelte ve düz HTML gösterir.

Adım 1 — Hazır bir tema bağlayın

themes/ dizini 45 bağımsız stil sayfası içerir. Bunları uygulamanızın statik varlıklarına kopyalayın ve birini bağlayın: 

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

Kümenin öne çıkanları:

  • Kamu sektörü — NHS England / Scotland / Wales, her biri hasta odaklı ve uygulayıcı odaklı biçimlerde; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Satıcılardan esinlenen — adobe-spectrum, mozilla-protocol.
  • Genel amaçlı — light, dark, nord, dracula, wireframe, corporate, synthwaveve daha birçoğu.

Çalışmanızı kontrol edin: sayfayı yeniden yükleyin. Çerçeve eğitiminde oluşturduğunuz aynı işaretleme artık tamamen biçimli — düğmeler, girdiler, etiketler, odak halkaları. Bunu bir satır HTML yaptı — her bileşen tam olarak olduğu gibi kaldı.

Adım 2 — Her şeyi geçersiz kılın

Tema seçicileri şuna sarılıdır: :where(...)ki bunun özgüllüğü sıfırdır — yani yazdığınız her kural kazanır, kısa ve net: 

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

Adım 3 — theme-picker ile çalışma anında geçiş

theme-picker yardımcı, tema yaşam döngüsünün tamamına sahip, başsız bir simge düğmesi + listbox'tır: seçilen stil sayfasını yönetilen tek bir <link> değiştirerek yükler (yalnızca etkin tema getirilir), belgeye data-theme="{slug}" ayarlar ve isteğe bağlı olarak şuraya kalıcı yazar: localStorage. Burada Svelte gösteriliyor; React, Vue, Angular, HTML, Nunjucks ve Blazor taşımaları sözleşme sözleşme eşleşir: 

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

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

Entegrasyonun tamamı bu. Klavye davranışı WAI-ARIA APG listbox kalıbını izler; denetimin kendisi başsızdır (sınıf kancası .theme-picker), bu yüzden hangi tema etkinse onu alır.

2026-08-29'da doğrulandı: tam bu kod parçası, yayımlanmış 0.1.1 paketine karşı derlendi; şunun aracılığıyla: svelte/server.

Adım 4 — Temaya kendi CSS'inizde tepki verin

Yardımcı belge köküne data-theme ayarladığı için kendi stilleriniz buna göre dallanabilir: 

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

Sunucu tarafı işleme için notlar

Yardımcı tüm DOM yazımlarını çerçevenin mount/effect yaşam döngüsü içinde yapar, dolayısıyla yapısı gereği SSR güvenlidir. İlk boyamadaki titremeyi önlemek için ilk temanın <link> ve data-theme değerini sunucuda işleyin (örneğin bir çerezden) — Svelte yardımcı deposu çalıştırılabilir bir SvelteKit çerez örneği içerir, diğer kataloglar da kendi yığınları için aynı kalıbı belgeler.

Sonraki adımlar

  • Tercih yardımcıları — dil, metin boyutu, paylaşım ve tarih/saat girişi için aynı kalıp.
  • Bir tema katkıda bulunun — her biri sınıf kancalarını hedefleyen bağımsız bir stil sayfasıdır; bkz. katkı rehberi.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.