Bagaimana Anda Boleh Mengesan Mod Gelap dalam JavaScript?

Mengesan Mod Gelap dalam JavaScript

Banyak sistem pengendalian moden seperti Windows dan macOS menawarkan mod gelap sebagai pilihan untuk meningkatkan pengalaman pengguna dan mengurangkan ketegangan mata dalam tetapan cahaya malap . Sebagai pembangun, adalah berfaedah untuk dapat mengesan skema warna pilihan sistem pengendalian pengguna untuk memberikan pengalaman pengguna yang lancar.

Pertanyaan Media CSS untuk Mod Gelap

Untuk CSS, @ pertanyaan media media (lebih suka-gelap-antara muka) boleh digunakan untuk menggunakan gaya khusus untuk mod gelap. Walau bagaimanapun, apabila menggunakan API seperti Stripe Elements yang menggunakan JavaScript untuk penggayaan, pendekatan berbeza diperlukan.

JavaScript Solution

Untuk menentukan skema warna pilihan sistem pengendalian dalam JavaScript, anda boleh menggunakan yang berikut kod:

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

Kod ini menggunakan API window.matchMedia() untuk menyemak sama ada penyemak imbas pengguna menyokong pertanyaan media dan sama ada pertanyaan media '(prefers-color-scheme: dark)' dipadankan. Jika pertanyaan sepadan, ini menunjukkan bahawa pengguna telah mendayakan mod gelap pada sistem pengendalian mereka.

Memantau Perubahan Skim Warna

Jika anda perlu membalas perubahan dalam pilihan skema warna pengguna, anda boleh menggunakan kaedah addEventListener() untuk mendengar acara pada pertanyaan media. Kod berikut menambah pendengar acara yang akan mencetuskan fungsi panggil balik apabila skema warna berubah:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  const newColorScheme = event.matches ? "dark" : "light";
  // Perform necessary actions based on the new color scheme
});

Dengan menggunakan teknik ini, anda boleh mengesan dan bertindak balas terhadap skema warna pilihan pengguna dengan berkesan, memastikan konsisten dan pengalaman pengguna yang dioptimumkan tidak kira sama ada mereka menggunakan mod terang atau gelap.

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