導入

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

    
Hello, World!

    
    

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

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

GitHub でフォローしてください アヴィナシュ タレ