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

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

Windows や macOS などの多くの最新オペレーティング システムでは、ユーザー エクスペリエンスを向上させ、低照度設定での目の疲れを軽減するオプションとしてダーク モードを提供しています。 。開発者にとって、シームレスなユーザー エクスペリエンスを提供するために、ユーザーのオペレーティング システムの優先カラー スキームを検出できることは有益です。

ダーク モード用の CSS メディア クエリ

CSS の場合、@ media (prefers-dark-interface) メディア クエリを使用して、ダーク モード専用のスタイルを適用できます。ただし、スタイル設定に JavaScript を利用する Stripe Elements などの API を使用する場合は、別のアプローチが必要です。

JavaScript ソリューション

JavaScript でオペレーティング システムの優先カラー スキームを決定するには、次のメソッドを使用できます。コード:

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

このコードは、window.matchMedia() API を利用して、ユーザーのブラウザがメディア クエリをサポートしているかどうか、および「(prefers-color-scheme: dark)」メディア クエリが一致しました。クエリが一致する場合、ユーザーがオペレーティング システムでダーク モードを有効にしていることを示します。

カラー スキームの変更の監視

ユーザーのカラー スキーム設定の変更に対応する必要がある場合は、 addEventListener() メソッドを使用して、メディア クエリ上のイベントをリッスンできます。次のコードは、カラー スキームが変更されるたびにコールバック関数をトリガーするイベント リスナーを追加します。

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  const newColorScheme = event.matches ? "dark" : "light";
  // Perform necessary actions based on the new color scheme
});

これらの手法を利用することで、ユーザーの好みのカラー スキームを効果的に検出して応答し、一貫性のあるカラー スキームを確保できます。ライト モードとダーク モードのどちらを使用しているかに関係なく、ユーザー エクスペリエンスが最適化されます。

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