Pemboleh Ubah CSS untuk Menukar Tema

Sifat tersuai CSS (pemboleh ubah) yang ditakrifkan pada :root tersedia secara global di seluruh helaian gaya. Tentukan palet warna lengkap sekali — latar belakang, warna teks, permukaan dan sempadan — kemudian rujuknya di mana-mana. Sumber kebenaran tunggal ini menjadikan pertukaran tema mudah.

Apabila atribut data-theme="dark" ditetapkan pada document.documentElement, pemilih CSS seperti [data-theme='dark'] menggantikan pemboleh ubah akar dengan nilai gelap. Komponen merujuk var(--color-bg) dan secara automatik menggunakan nilai baharu tanpa sebarang perubahan kod.

Sekurang-kurangnya, tentukan: --color-bg (latar belakang halaman), --color-text (teks utama), --color-primary (warna jenama), --color-surface (latar belakang kad atau panel) dan --color-border (pemisah). Set token yang konsisten menghalang nilai warna sementara daripada muncul dalam komponen.

Dalam CSS komponen anda, rujuk pemboleh ubah seperti background: var(--color-bg) dan color: var(--color-text). Anda juga boleh memberikan nilai sandaran: var(--color-bg, #ffffff). Pelayar menyelesaikan pemboleh ubah pada masa pemaparan, jadi satu kelas berfungsi untuk kedua-dua tema cerah dan gelap.

Tambahkan transition: background-color 200ms, color 200ms pada pemilih :root. Apabila atribut data-theme berubah, semua unsur yang menggunakan pemboleh ubah CSS akan beranimasi kepada nilai baharunya secara serentak. Ini menghasilkan pengalaman yang kemas tanpa sebarang kod animasi JS.

Mengurus tema melalui pemboleh ubah CSS lebih baik daripada menetapkan gaya sebaris daripada JavaScript. Pelayar mengendalikan semua pengiraan semula gaya secara natif, tiada pemaparan semula React tambahan dicetuskan untuk setiap komponen anak bertema dan lata CSS mengendalikan pewarisan secara automatik. JS hanya perlu menukar satu atribut pada unsur akar.

Anda boleh menggabungkan pemboleh ubah CSS dengan pertanyaan @media (prefers-color-scheme: dark) sebagai sandaran yang hanya menggunakan CSS. Tentukan penggantian gelap dalam pertanyaan media itu sebagai tambahan kepada atau menggantikan pemilih data-theme. Ini memastikan mod gelap berfungsi walaupun JavaScript belum dijalankan.

Pendekatan yang paling kukuh menggabungkan kedua-dua mekanisme: pertanyaan @media menyediakan lalai OS, manakala atribut data-theme membenarkan penggantian pengguna melalui JavaScript. Apabila atribut itu wujud, ia diutamakan kerana kekhususan; apabila tiada, pertanyaan media berkuat kuasa.

Untuk imej yang kelihatan kurang baik pada latar belakang gelap, gunakan elemen picture HTML dengan anak source media="(prefers-color-scheme: dark)". Pelayar memilih varian gelap secara automatik. Untuk ikon SVG dalam CSS, anda boleh menggunakan filter: invert(1) sebagai anggaran pantas.

Pemboleh ubah CSS juga boleh dilingkungkan kepada komponen individu dengan mentakrifkannya pada unsur akar komponen dan bukannya :root. Ini membolehkan penemaaan mengikut komponen, seperti bar sisi dengan token latar belakangnya sendiri yang berbeza daripada latar belakang halaman, sambil semuanya masih bertukar dengan betul melalui togol tema global.

Chrome DevTools memaparkan nilai pemboleh ubah CSS yang telah diselesaikan dalam panel Styles. Klik rujukan pemboleh ubah untuk pergi ke takrifannya. Ini memudahkan anda mengesahkan bahawa token gelap atau cerah yang betul digunakan pada mana-mana unsur. Anda juga boleh mengedit nilai pemboleh ubah secara langsung dalam panel.

Sifat tersuai CSS pada :root menyediakan sistem token berpusat untuk tema. Togol atribut data-theme pada unsur html untuk menukar tema serta-merta. Tambahkan peralihan CSS untuk animasi yang lancar, gunakan pertanyaan media prefers-color-scheme sebagai sandaran yang hanya menggunakan CSS dan elakkan penggantian gaya JS mengikut komponen.