JavaScript でダークモードを検出するにはどうすればよいですか?

JavaScript でのダーク モードの検出

Windows や macOS などのオペレーティング システムでダーク モードが広く採用されているため、開発者は方法を必要としています。それに応じて Web アプリケーションを適応させます。このタスクは、ユーザー インターフェイスをカスタマイズし、システムの優先配色に基づいて要素のスタイルを動的に設定するときに発生します。

1 つのアプローチには、CSS メディア クエリを使用してダーク モード設定をターゲットにすることが含まれます。ただし、Stripe Elements API を使用して作成された要素など、JavaScript でスタイル設定された要素を処理する場合は、より包括的なソリューションが必要です。

JavaScript でオペレーティング システムのカラー スキームをプログラム的に決定するには、次の手法を利用します。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark mode is active
}

このメソッドは、ブラウザが window.matchMedia() API をサポートしているかどうかを確認し、メディア クエリを使用してシステムの優先配色が暗いかどうかを確認します。

配色の変更を監視するには

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

このリスナー関数は、メディア クエリ内の変更を監視し、新しいカラー スキームを示すイベント オブジェクトを提供します。開発者は、現在のシステム設定に合わせてアプリケーションを動的に更新できます。

この技術を実装することで、Web アプリケーションはダーク モードにシームレスに適応でき、さまざまなシステムや動作条件にわたって一貫した視覚的に魅力的なエクスペリエンスをユーザーに提供できます。

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