Bagaimanakah Saya Boleh Mengesan Mod Gelap dalam JavaScript?

Mengesan Mod Gelap dalam JavaScript

Dengan pengenalan mod gelap dalam Windows dan macOS, pembangun menghadapi cabaran untuk menyesuaikan gaya CSS dan JavaScript untuk memadankan skema warna pilihan pengguna. Soalan ini meneroka cara untuk mengesan mod gelap dalam JavaScript, membenarkan pelarasan skema warna responsif.

Pendekatan Pertanyaan Media

Untuk CSS, pertanyaan media menyediakan penyelesaian mudah:

@media (prefers-dark-interface) {
  color: white; background: black 
}

Pengesanan JavaScript

API Elemen Stripe, yang digunakan untuk mencipta elemen pembayaran, memerlukan spesifikasi warna dalam JavaScript. Untuk mengesan mod gelap dalam konteks ini, seseorang perlu memanfaatkan API JavaScript:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Pertanyaan ini menyemak sama ada API window.matchMedia disokong dan menilai rentetan pertanyaan media. Jika benar, sistem lebih suka mod gelap.

Menonton Perubahan Skim Warna

Untuk mengendalikan perubahan dinamik dalam skema warna, seseorang boleh melanggan acara perubahan:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Ini membolehkan pelarasan masa nyata sebagai tindak balas kepada pilihan pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Mod Gelap dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!