Variabel CSS untuk Pergantian Tema

Properti kustom CSS (variabel) yang didefinisikan pada :root tersedia secara global di seluruh lembar gaya. Anda mendefinisikan palet warna lengkap sekali — latar belakang, warna teks, permukaan, garis tepi — lalu merujuknya di mana saja. Satu sumber kebenaran ini membuat pergantian tema menjadi mudah.

Saat atribut data-theme="dark" ditetapkan pada document.documentElement, pemilih CSS seperti [data-theme='dark'] mengganti variabel akar dengan nilai gelap. Komponen merujuk var(--color-bg) dan otomatis menggunakan nilai baru tanpa perubahan kode apa pun.

Setidaknya, definisikan: --color-bg (latar belakang halaman), --color-text (teks utama), --color-primary (warna merek), --color-surface (latar belakang kartu/panel), dan --color-border (pemisah). Kumpulan token yang konsisten mencegah nilai warna sembarangan muncul dalam komponen.

Dalam CSS komponen Anda, rujuk variabel seperti background: var(--color-bg) dan color: var(--color-text). Anda juga dapat memberikan nilai cadangan: var(--color-bg, #ffffff). Peramban menyelesaikan variabel saat merender, sehingga satu kelas dapat digunakan untuk tema terang dan gelap.

Tambahkan transition: background-color 200ms, color 200ms ke pemilih :root. Saat atribut data-theme berubah, semua elemen yang menggunakan variabel CSS akan beranimasi menuju nilai barunya secara bersamaan. Hal ini menghasilkan tampilan yang lebih halus tanpa kode animasi JS.

Mengelola tema melalui variabel CSS lebih baik daripada menetapkan gaya sebaris dari JavaScript. Peramban menangani semua perhitungan ulang gaya secara bawaan, tidak ada render ulang React tambahan untuk setiap komponen anak bertema, dan kaskade CSS menangani pewarisan secara otomatis. JS hanya perlu mengubah satu atribut pada elemen akar.

Anda dapat menggabungkan variabel CSS dengan kueri @media (prefers-color-scheme: dark) sebagai nilai cadangan yang hanya menggunakan CSS. Tentukan penggantian gelap di dalam kueri media selain (atau sebagai pengganti) pemilih data-theme. Hal ini memastikan mode gelap tetap berfungsi meskipun JavaScript belum dijalankan.

Pendekatan yang paling andal menggunakan kedua mekanisme: kueri @media menyediakan bawaan OS, sedangkan atribut data-theme memungkinkan penggantian oleh pengguna melalui JavaScript. Saat atribut tersebut ada, atribut akan diprioritaskan karena spesifisitasnya; saat tidak ada, kueri media berlaku.

Untuk gambar yang tampak buruk pada latar belakang gelap, gunakan elemen HTML picture dengan anak source media="(prefers-color-scheme: dark)". Peramban akan memilih varian gelap secara otomatis. Untuk ikon SVG dalam CSS, Anda dapat menggunakan filter: invert(1) sebagai pendekatan cepat.

Variabel CSS juga dapat dibatasi pada komponen tertentu dengan mendefinisikannya pada elemen akar komponen, bukan pada :root. Hal ini memungkinkan pemberian tema per komponen, seperti bilah sisi dengan token latar belakangnya sendiri yang berbeda dari latar belakang halaman, dan semuanya tetap berganti dengan benar melalui pengalih tema global.

Chrome DevTools menampilkan nilai variabel CSS yang telah dihitung dalam panel Gaya. Klik referensi variabel untuk menuju definisinya. Dengan demikian, Anda dapat memverifikasi dengan mudah bahwa token gelap atau terang yang benar diterapkan pada elemen mana pun. Anda juga dapat mengubah nilai variabel secara langsung di panel tersebut.

Pemilih CSS mana yang digunakan untuk mendefinisikan properti kustom CSS global yang berlaku untuk seluruh dokumen?

Properti kustom CSS pada :root menyediakan sistem token terpusat untuk tema. Alihkan atribut data-theme pada elemen html untuk mengganti tema secara instan. Tambahkan transisi CSS untuk animasi yang halus, gunakan kueri media prefers-color-scheme sebagai nilai cadangan yang hanya menggunakan CSS, dan hindari penggantian gaya JS per komponen.