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

導入

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

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

ダーク モードの人気により、多くの Web サイトやアプリケーションがユーザーのシステム設定に合わせたテーマを提供するようになりました。この機能は、JavaScript の matchMedia API を使用して実現され、Web アプリケーションがユーザーの配色設定などのメディア クエリの変更に応答できるようになります。

仕組み

matchMedia API

window.matchMedia メソッドは、メディア クエリを評価し、ユーザーの好みに基づいてサイトの外観を調整する方法を提供します。ダークモードが有効かどうかを確認するには、次の JavaScript 関数を使用できます:

実際の実装

index.html

• updateTheme 関数: この関数はダーク モードの設定をチェックし、それに応じてクラスを更新します。 リアルタイム更新: カラースキーム設定の変更を検出し、更新テーマを呼び出してリアルタイムで外観を調整するイベント リスナーを matchMedia に追加しました。

システムの配色を変更すると、ページを更新しなくても、Web サイトは設定を反映するように自動的に適応されます。

GitHub でフォローしてください

以上がJSでユーザーがダークモードかどうかを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。