Mengesan Skema Warna Sistem

Pertanyaan media CSS prefers-color-scheme mengesan sama ada pengguna telah mengkonfigurasi sistem pengendalian mereka untuk menggunakan tema warna gelap atau cerah. Ia menerima dua nilai: dark dan light. Keutamaan ini ditetapkan pada peringkat OS dalam tetapan sistem, bukannya dalam pelayar.

Anda boleh menggunakan gaya gelap sepenuhnya dalam CSS melalui @media (prefers-color-scheme: dark) { ... }. Dalam blok ini, anda menggantikan warna, latar belakang dan sempadan supaya sesuai dengan palet gelap. Pendekatan ini tidak memerlukan JavaScript dan berfungsi walaupun sebelum React dipasang.

Dalam JavaScript, window.matchMedia('(prefers-color-scheme: dark)') mengembalikan objek MediaQueryList. Anda boleh menggunakannya untuk membaca keutamaan sistem semasa secara terprogram dalam cangkuk React atau pengendali peristiwa. Ini ialah penghubung antara pertanyaan media CSS dengan logik JS anda.

Objek MediaQueryList mempunyai sifat matches yang mengembalikan nilai boolean. Jika matches ialah true, sistem berada dalam mod gelap; jika false, sistem berada dalam mod cerah. Biasanya, anda membaca nilai ini sekali semasa pemasangan untuk memulakan keadaan tema.

Pengguna boleh mengubah skema warna OS pada bila-bila masa. Untuk bertindak balas secara dinamik, panggil mediaQuery.addEventListener('change', handler), dengan handler menerima MediaQueryListEvent yang dikemas kini. Objek peristiwa itu juga mempunyai boolean matches yang mencerminkan keutamaan baharu.

Pendekatan yang kemas ialah membina cangkuk tersuai menggunakan useSyncExternalStore. Cangkuk itu melanggan mediaQuery.addEventListener dan menyediakan fungsi syot kilat yang mengembalikan mediaQuery.matches. Ini memastikan cangkuk sentiasa selaras dengan API pelayar luaran tanpa pengurusan keadaan manual.

Apabila komponen anda dinyahpasang, anda mesti membuang pendengar peristiwa untuk mengelakkan kebocoran memori. Dalam pembersihan useEffect, panggil mediaQuery.removeEventListener('change', handler). Dengan useSyncExternalStore, fungsi langganan mesti mengembalikan fungsi pembatalan langganan yang melakukan perkara yang sama.

Keutamaan sistem ialah perkara yang dilaporkan oleh OS. Namun, pengguna sering mahu menggantikan tema aplikasi secara berasingan, contohnya mengekalkan aplikasi dalam mod cerah semasa OS berada dalam mod gelap. Seni bina anda hendaklah membezakan lalai sistem daripada penggantian pengguna yang jelas dan disimpan dalam localStorage.

Chrome DevTools membolehkan anda meniru keutamaan skema warna tanpa mengubah tetapan OS. Buka DevTools, pergi ke tab Rendering dan cari menu lungsur "Emulate CSS media feature prefers-color-scheme". Ciri ini amat berguna untuk menguji kedua-dua tema dengan cepat semasa pembangunan.

Pelaksanaan mod gelap yang baik membaca keutamaan sistem sebagai titik permulaan lalai dan menggunakannya dengan serta-merta. Ini menunjukkan penghormatan terhadap tetapan kebolehcapaian pengguna. Hanya selepas pengguna menukar tema secara jelas dalam aplikasi anda, barulah anda menyimpan dan menggunakan penggantian yang berbeza.

Pada pelayan, window.matchMedia tidak wujud. Jika anda melakukan pemaparan pada pelayan, gunakan pengawal typeof window !== 'undefined' sebelum memanggil matchMedia. Untuk aplikasi SSR, baca keutamaan pengguna daripada kuki atau pengepala HTTP bagi mengelakkan ketidakpadanan hidrasi.

Pertanyaan media prefers-color-scheme mendedahkan keutamaan warna OS dalam CSS dan JavaScript. Gunakan window.matchMedia untuk membaca serta mendengar perubahan, sentiasa bersihkan pendengar peristiwa dan bezakan lalai sistem daripada penggantian pengguna. Peniruan melalui Chrome DevTools mempercepatkan pengujian kedua-dua tema.