Transisi Mode Terang dan Gelap Halus: Token, CSS, dan Gerakan
Cara membuat saklar tema terang/gelap yang mengikuti pengaturan sistem, menghindari flash saat memuat, mengatur gaya kontrol asli dan menganimasikan tanpa mengganggu aksesibilitas.
Pengambilan Inti
Bangun tema pada token semantik, ikuti pengaturan sistem dengan skema warna pilihan secara default, biarkan orang menimpanya, dan atur properti skema warna sehingga kontrol formulir dan bilah gulir cocok. Terapkan tema yang disimpan sebelum halaman ditampilkan untuk menghindari flash. Buat animasi pengalih tetap singkat, seperti pudar silang cepat atau Transisi Tampilan, dan lewati saat gerakan dikurangi aktif.
Mulai dari pengaturan sistem
Fitur media skema warna pilihan memberi tahu Anda apakah pengguna telah menanyakan tema terang atau gelap pada sistem operasi mereka. Gunakan sebagai default, dan tambahkan tombol dalam aplikasi yang menggantikannya dan diingat.
Tema dengan token, bukan override
Tentukan warna sebagai token semantik (permukaan, teks, batas, aksen) dan berikan nilai tersendiri pada setiap tema, biasanya sebagai properti khusus CSS pada elemen akar. Komponen tidak pernah berubah antar tema; hanya nilai token yang bisa melakukannya. Ini adalah pendekatan token tiga tingkat yang sama yang digunakan untuk sistem desain multi-merek.
Jangan lupakan kontrol asli
MDN menjelaskan bahwa properti skema warna memberi tahu browser skema mana yang didukung elemen, yang mengubah warna default kontrol formulir, bilah gulir, dan UI bawaan lainnya. Tanpanya, halaman gelap dapat menampilkan input dan scrollbar berwarna putih terang.
Hindari flash saat memuat
Jika tema yang disimpan diterapkan oleh JavaScript setelah halaman dirender, orang akan melihat sekilas tema yang salah. Terapkan sedini mungkin, dengan skrip inline kecil di kepala dokumen atau atribut yang dirender server, sebelum stylesheet dicat.
Animasikan saklar dengan hati-hati
Cross-fade singkat, sekitar 150 hingga 250 milidetik, membuat perubahan terasa disengaja. Hindari mentransisikan setiap properti warna pada setiap elemen, yang mungkin lambat pada halaman besar; satu snapshot View Transition seringkali lebih lancar. Buat pengalihnya jelas, dengan label atau tooltip, dan hapus animasi saat pengurangan gerakan aktif.
Cuplikan Implementasi Produksi
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Kunci Principles untuk Diingat
- Default ke skema warna pilihan; biarkan orang mengesampingkan dan mengingatnya
- Tema dengan token semantik, bukan penggantian per komponen
- Tetapkan skema warna agar kontrol asli cocok
- Terapkan tema yang disimpan sebelum pengecatan pertama
- Jaga agar animasi peralihan tetap singkat dan hargai gerakan yang dikurangi
Pertanyaan yang Sering Diajukan
Sumber
- prefers-color-scheme — Dokumen Web MDN
- color-scheme — Dokumen Web MDN
- View Transition API — Dokumen Web MDN