Mendeteksi Skema Warna Sistem

Kueri media CSS prefers-color-scheme mendeteksi apakah pengguna telah mengatur sistem operasinya untuk menggunakan tema warna gelap atau terang. Kueri ini menerima dua nilai: dark dan light. Preferensi ini diatur pada tingkat OS dalam pengaturan sistem, bukan di peramban.

Anda dapat menerapkan gaya gelap hanya dengan CSS menggunakan @media (prefers-color-scheme: dark) { ... }. Di dalam blok ini, Anda mengganti warna, latar belakang, dan garis tepi agar sesuai dengan palet gelap. Pendekatan ini tidak memerlukan JavaScript dan tetap berfungsi bahkan sebelum React dipasang.

Dalam JavaScript, window.matchMedia('(prefers-color-scheme: dark)') mengembalikan objek MediaQueryList. Anda dapat menggunakannya untuk membaca preferensi sistem saat ini secara terprogram di dalam hook React atau pemroses peristiwa. Inilah penghubung antara kueri media CSS dan logika JS Anda.

Objek MediaQueryList memiliki properti matches yang mengembalikan nilai logis. Jika matches bernilai true, sistem berada dalam mode gelap; jika false, sistem berada dalam mode terang. Biasanya Anda membaca nilai ini sekali saat pemasangan untuk menginisialisasi status tema.

Pengguna dapat mengubah skema warna OS kapan saja. Untuk merespons secara dinamis, panggil mediaQuery.addEventListener('change', handler), dengan handler menerima MediaQueryListEvent yang telah diperbarui. Objek peristiwa tersebut juga memiliki nilai logis matches yang mencerminkan preferensi baru.

Pendekatan yang rapi adalah membuat pengait kustom menggunakan useSyncExternalStore. Pengait ini berlangganan melalui mediaQuery.addEventListener dan menyediakan fungsi snapshot yang mengembalikan mediaQuery.matches. Dengan demikian, pengait tetap tersinkronisasi dengan API peramban eksternal tanpa pengelolaan status manual.

Saat komponen Anda dilepas, Anda harus menghapus pendengar peristiwa untuk mencegah kebocoran memori. Dalam pembersihan useEffect, panggil mediaQuery.removeEventListener('change', handler). Dengan useSyncExternalStore, fungsi langganan harus mengembalikan fungsi pembatalan langganan yang melakukan hal yang sama.

Preferensi sistem adalah apa yang dilaporkan oleh OS. Namun, pengguna sering ingin mengganti tema aplikasi secara terpisah, misalnya mempertahankan aplikasi dalam mode terang saat OS berada dalam mode gelap. Arsitektur Anda harus membedakan bawaan sistem dari penggantian eksplisit oleh pengguna yang disimpan dalam localStorage.

Chrome DevTools memungkinkan Anda meniru preferensi skema warna tanpa mengubah pengaturan OS. Buka DevTools, buka tab Rendering, lalu temukan menu tarik-turun "Emulate CSS media feature prefers-color-scheme". Fitur ini sangat berguna untuk menguji kedua tema dengan cepat selama pengembangan.

Implementasi mode gelap yang baik membaca preferensi sistem sebagai titik awal bawaan dan langsung menerapkannya. Hal ini menunjukkan penghormatan terhadap pengaturan aksesibilitas pengguna. Hanya setelah pengguna secara eksplisit mengubah tema di aplikasi Anda, simpan dan gunakan penggantian yang berbeda.

Di server, window.matchMedia tidak tersedia. Jika Anda merender di server, gunakan penjagaan typeof window !== 'undefined' sebelum memanggil matchMedia. Untuk aplikasi SSR, baca preferensi pengguna dari cookie atau header HTTP agar tidak terjadi ketidaksesuaian hidrasi.

Properti apa dari objek MediaQueryList yang memberi tahu Anda apakah kueri media saat ini cocok?

Kueri media prefers-color-scheme menyediakan preferensi warna OS dalam CSS dan JavaScript. Gunakan window.matchMedia untuk membaca dan mendengarkan perubahan, selalu hapus pendengar peristiwa, dan bedakan bawaan sistem dari penggantian pengguna. Emulasi Chrome DevTools mempercepat pengujian kedua tema.