Lily Design System™

Tema

Komponen Lily memiliki kait kelas yang stabil dan nol CSS — jadi tema hanyalah lembar gaya. Tutorial ini berjalan dari "tautkan satu berkas" hingga "biarkan pengguna mengganti tema saat berjalan, dengan persistensi".

Apa yang akan Anda bangun

Aplikasi yang seluruh tampilannya dapat diubah pengguna — dimulai dari satu lembar gaya tertaut, berakhir dengan pengalih tema saat berjalan yang persisten — dalam sekitar 15 menit.

Sebelum memulai

Selesaikan dulu tutorial kerangka kerja untuk tumpukan Anda dulu, agar Anda memiliki formulir Lily kecil untuk diberi tema. Semua di sini bekerja di ketujuh kerangka kerja; contoh kode menampilkan Svelte dan HTML biasa.

Langkah 1 — Tautkan tema siap pakai

themes/ direktori berisi 45 lembar gaya mandiri. Salin ke aset statis aplikasi Anda dan tautkan satu: 

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

Sorotan set ini:

  • Sektor publik — NHS England / Scotland / Wales, masing-masing dalam varian untuk pasien dan praktisi; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Terinspirasi vendor — adobe-spectrum, mozilla-protocol.
  • Tujuan umum — light, dark, nord, dracula, wireframe, corporate, synthwave, dan banyak lagi.

Periksa pekerjaan Anda: muat ulang halaman. Markup yang sama yang Anda bangun di tutorial kerangka kerja kini sepenuhnya bergaya — tombol, input, label, cincin fokus. Satu baris HTML melakukannya — setiap komponen tetap persis seperti semula.

Langkah 2 — Timpa apa pun

Selektor tema dibungkus dalam :where(...)yang berspesifisitas nol — jadi aturan apa pun yang Anda tulis menang, sesederhana itu: 

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

Langkah 3 — Pengalihan saat berjalan dengan theme-picker

theme-picker pembantu adalah tombol-ikon headless + kotak daftar yang memiliki seluruh siklus hidup tema: ia memuat lembar gaya terpilih dengan menukar satu <link> terkelola (hanya tema aktif yang diambil), menetapkan data-theme="{slug}" pada dokumen, dan secara opsional menyimpan di localStorage. Svelte ditampilkan di sini; port React, Vue, Angular, HTML, Nunjucks, dan Blazor sesuai kontrak demi kontrak: 

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

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

Itulah seluruh integrasinya. Perilaku papan ketik mengikuti pola kotak daftar WAI-ARIA APG; kontrolnya sendiri headless (kait kelas .theme-picker), jadi ia mengambil tema apa pun yang aktif.

Diverifikasi 2026-08-29: cuplikan yang persis ini dikompilasi terhadap paket 0.1.1 yang diterbitkan, melalui svelte/server.

Langkah 4 — Tanggapi tema di CSS Anda sendiri

Karena pembantu menetapkan data-theme pada akar dokumen, gaya Anda sendiri dapat bercabang berdasarkan itu: 

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

Catatan untuk render di server

Pembantu melakukan semua penulisan DOM di dalam siklus hidup mount/effect kerangka kerja, jadi aman untuk SSR sejak rancangan. Untuk menghindari kedipan pada pewarnaan pertama, render <link> dan data-theme tema awal di server (misalnya dari cookie) — repositori pembantu Svelte menyertakan contoh cookie SvelteKit yang dapat dijalankan, dan katalog lain mendokumentasikan pola yang sama untuk tumpukannya.

Langkah berikutnya

  • Pembantu preferensi — pola yang sama untuk bahasa, ukuran teks, berbagi, dan input tanggal/waktu.
  • Sumbangkan tema — masing-masing adalah satu lembar gaya mandiri yang menargetkan kait kelas; lihat kontribusi.

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.