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

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

Windows と macOS でのダーク モードの導入により、開発者は CSS と JavaScript スタイルを適応させるという課題に直面しています。ユーザーの好みの配色に合わせてください。この質問では、JavaScript でダーク モードを検出し、レスポンシブ カラー スキームの調整を可能にする方法について説明します。

メディア クエリのアプローチ

CSS の場合、メディア クエリは簡単な解決策を提供します。

@media (prefers-dark-interface) {
  color: white; background: black 
}

JavaScript 検出

支払い要素の作成に使用される Stripe Elements API では、JavaScript での色の指定が必要です。このコンテキストでダーク モードを検出するには、JavaScript API を利用する必要があります。

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

このクエリは、window.matchMedia API がサポートされているかどうかを確認し、メディア クエリ文字列を評価します。 true の場合、システムはダーク モードを優先します。

カラー スキームの変更を監視します

カラー スキームの動的な変更を処理するには、変更イベントをサブスクライブできます。

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

これにより、ユーザーの好みに応じてリアルタイムの調整が可能になります。

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