pengenalan

Pernahkah anda terfikir bagaimana tapak web bertukar dengan lancar antara mod terang dan gelap berdasarkan pilihan anda? Ia bukan sihir—ia adalah penggunaan bijak teknologi web moden. Dalam siaran ini, saya akan mendedahkan teknik mudah tetapi berkuasa di sebalik mengesan sama ada pengguna lebih suka mod gelap dan cara anda boleh menggunakan maklumat ini untuk meningkatkan pengalaman pengguna di tapak web anda.

Memahami Pengesanan Mod Gelap

Dengan populariti mod gelap, banyak tapak web dan aplikasi kini menawarkan tema yang selaras dengan pilihan sistem pengguna. Ciri ini dicapai menggunakan API matchMedia dalam JavaScript, yang membolehkan aplikasi web bertindak balas terhadap perubahan dalam pertanyaan media, seperti pilihan skema warna pengguna.

Bagaimana ia berfungsi

API matchMedia

Kaedah window.matchMedia menyediakan cara untuk menilai pertanyaan media dan menyesuaikan penampilan tapak anda berdasarkan pilihan pengguna. Untuk menyemak sama ada mod gelap didayakan, anda boleh menggunakan fungsi JavaScript berikut:

// Check if the user prefers dark mode function isDarkMode() { return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; }

Perlaksanaan Praktikal

index.html

     
  
Hello, World!
    

• kemas kini Fungsi Tema: Fungsi ini menyemak pilihan mod gelap dan mengemas kini kelas dengan sewajarnya. Kemas Kini Masa Nyata: Menambahkan pendengar acara pada matchMedia untuk mengesan perubahan dalam pilihan skema warna dan tema kemas kini panggilan untuk melaraskan penampilan dalam masa nyata.

Apabila anda menukar skema warna sistem anda, tapak web akan menyesuaikan secara automatik untuk mencerminkan pilihan anda tanpa perlu memuat semula halaman.

Ikuti Saya di GitHub Avinash Tare

Atas ialah kandungan terperinci Cara Mengesan jika Pengguna berada dalam Mod Gelap Dalam Js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!