JavaScript はどのようにしてダーク モードを検出し、ストライプ要素に適用できるのでしょうか?

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

Windows や macOS などの最新のオペレーティング システムには、ダーク モード オプションが用意されています。 CSS は @media (prefers-dark-interface) を使用してダーク モード設定を検出する方法を提供しますが、JavaScript 開発者には代替ソリューションが必要です。

JavaScript 検出

検出するにはJavaScript で優先されるカラースキームを設定するには、window.matchMedia() API を使用できます。次のコードはダーク モードをチェックします:

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

変更の監視

また、優先カラー スキームへの変更をリッスンすることもできます:

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

ストライプ要素への適用

この検出をストライプ要素に適用するには、優先配色に基づいて stripElementStyles オブジェクトを動的に変更します。例:

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    stripeElementStyles.base.color = COLORS.lightGrey;
} else {
    stripeElementStyles.base.color = COLORS.darkGrey;
}

これにより、ユーザーのオペレーティング システムの設定に基づいて、ストライプ エレメントがダーク モードまたはライト モードに適切にスタイル設定されます。

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