首页 >web前端 >js教程 >Js中如何检测用户是否处于深色模式

Js中如何检测用户是否处于深色模式

王林原创: 2024-08-24 22:30:03663浏览

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

介绍

您有没有想过网站如何根据您的喜好在浅色和深色模式之间无缝切换？这不是魔法，而是现代网络技术的巧妙运用。在这篇文章中，我将揭示检测用户是否喜欢深色模式的简单而强大的技术，以及如何使用此信息来增强网站上的用户体验。

了解暗模式检测

随着深色模式的流行，许多网站和应用程序现在都提供符合用户系统偏好的主题。此功能是使用 JavaScript 中的 matchMedia API 实现的，它允许 Web 应用程序响应媒体查询的变化，例如用户的配色方案首选项。

它是如何运作的

matchMedia API

window.matchMedia 方法提供了一种评估媒体查询并根据用户偏好调整网站外观的方法。要检查是否启用了深色模式，您可以使用以下 JavaScript 函数：

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

实际实施

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>

updateTheme 函数：此函数检查深色模式首选项并相应更新类。实时更新：matchMedia 添加事件监听器，用于检测配色方案首选项的变化，并调用更新主题来实时调整外观。

当您更改系统的配色方案时，网站将自动适应以反映您的偏好，而无需刷新页面。

在 GitHub 上关注我 Avinash Tare

以上是Js中如何检测用户是否处于深色模式的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html if switch using class Event JS function this github

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Top Free APIs You Need to Know in 4下一篇：The Differences Between var, let, and const Through the Prism of the ECMAScript Standard.

查看更多