Rumah >hujung hadapan web >tutorial js >Cara Mengesan jika Pengguna berada dalam Mod Gelap Dalam Js

Cara Mengesan jika Pengguna berada dalam Mod Gelap Dalam Js

王林asal: 2024-08-24 22:30:03664semak imbas

How to Detect if a User is in Dark Mode In Js

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

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Demo</title>
    <style>
        .dark {
            background: black;
            color: white;
        }
        .light {
            background: white;
            color: black;
        }
    </style>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- scripts -->
    <script>
        // Function to check if dark mode is enabled
        function isDarkMode() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        }

        // Function to update the theme based on the user's preference
        function updateTheme() {
            if (isDarkMode()) {
                document.body.classList.add("dark");
                document.body.classList.remove("light");
            } else {
                document.body.classList.add("light");
                document.body.classList.remove("dark");
            }
        }

        // Initial theme setup
        updateTheme();

        // Listen for changes in the color scheme preference
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
    </script>
</body>
</html>

Fungsi Tema kemas kini: 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 diri 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!

JavaScript html if switch using class Event JS function this github

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：API Percuma Teratas yang Perlu Anda Ketahui dalam 4Artikel seterusnya：API Percuma Teratas yang Perlu Anda Ketahui dalam 4

Artikel berkaitan

Lihat lagi