JSでユーザーがダークモードかどうかを検出する方法-jsチュートリアル-php.cn

JSでユーザーがダークモードかどうかを検出する方法

王林

リリース： 2024-08-24 22:30:03

オリジナル

666 人が閲覧しました

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

導入

Web サイトがユーザーの好みに基づいてライトモードとダークモードをどのようにシームレスに切り替えるのか疑問に思ったことはありますか?これは魔法ではなく、最新の Web テクノロジーを賢く利用したものです。この投稿では、ユーザーがダークモードを好むかどうかを検出する背後にあるシンプルかつ強力なテクニックと、この情報を使用して Web サイトのユーザーエクスペリエンスを向上させる方法を明らかにします。

ダークモード検出について

ダークモードの人気により、多くの Web サイトやアプリケーションがユーザーのシステム設定に合わせたテーマを提供するようになりました。この機能は、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>

ログイン後にコピー