Tema

Apa yang akan anda bina

Aplikasi yang seluruh rupanya boleh diubah pengguna — bermula dengan satu helaian gaya terpaut, berakhir dengan penukar tema runtime yang kekal — dalam kira-kira 15 minit.

Sebelum anda bermula

Selesaikan tutorial rangka kerja dahulu untuk tindanan anda, supaya anda mempunyai borang Lily kecil untuk ditemakan. Semuanya di sini berfungsi dalam ketujuh-tujuh rangka kerja; sampel kod menunjukkan Svelte dan HTML biasa.

Langkah 1 — Pautkan tema siap pakai

themes/ direktori mengandungi 45 helaian gaya kendiri. Salin ke aset statik aplikasi anda dan pautkan satu:

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

Sorotan set:

• Sektor awam — NHS England / Scotland / Wales, masing-masing dalam varian untuk pesakit dan pengamal; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
• Diilhamkan vendor — adobe-spectrum, mozilla-protocol.
• Serba guna — light, dark, nord, dracula, wireframe, corporate, synthwave, dan banyak lagi.

Langkah 2 — Atasi apa sahaja

Pemilih tema dibalut dalam :where(...)yang mempunyai kekhususan sifar — jadi sebarang peraturan yang anda tulis menang, mudah sahaja:

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

Langkah 3 — Penukaran runtime dengan theme-picker

theme-picker pembantu ialah butang ikon + kotak senarai tanpa kepala yang memiliki keseluruhan kitaran hayat tema: ia memuatkan helaian gaya terpilih dengan menukar satu <link> yang diurus (hanya tema aktif yang diambil), menetapkan data-theme="{slug}" pada dokumen, dan secara pilihan menyimpan ke localStorage. Svelte ditunjukkan di sini; port React, Vue, Angular, HTML, Nunjucks dan Blazor sepadan 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 keseluruhan integrasi. Tingkah laku papan kekunci mengikut corak kotak senarai WAI-ARIA APG; kawalan itu sendiri tanpa kepala (cangkuk kelas .theme-picker), jadi ia menerima apa jua tema yang aktif.

Langkah 4 — Bertindak balas terhadap tema dalam CSS anda sendiri

Kerana pembantu menetapkan data-theme pada akar dokumen, gaya anda sendiri boleh bercabang padanya:

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

Nota untuk perenderan pelayan

Pembantu melakukan semua penulisan DOM di dalam kitaran hayat mount/effect rangka kerja, jadi ia selamat untuk SSR secara reka bentuk. Untuk mengelak kelipan pada cat pertama, paparkan <link> dan data-theme tema awal di pelayan (contohnya daripada kuki) — repo pembantu Svelte menghantar contoh kuki SvelteKit yang boleh dijalankan, dan katalog lain mendokumenkan corak yang sama untuk tindanan mereka.

Langkah seterusnya

• Pembantu keutamaan — corak yang sama untuk bahasa, saiz teks, perkongsian dan kemasukan tarikh/masa.
• Sumbangkan tema — masing-masing ialah satu helaian gaya kendiri yang menyasarkan cangkuk kelas; lihat menyumbang.

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.