Js中如何偵測使用者是否處於深色模式-js教程-PHP中文網

Js中如何偵測使用者是否處於深色模式

王林

發布： 2024-08-24 22:30:03

原創

665 人瀏覽過

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>

登入後複製