ストライプ要素をスタイリングするために JavaScript でダーク モードを検出する方法

Stripe Elements API で使用するための JavaScript でのダーク モードの検出

Windows と macOS がダーク モードを提供し、ユーザーがインターフェイスの色を調整できるようになりました彼らの好みに合わせて計画を立てます。 CSS のスタイル設定については、@media (prefers-dark-interface) を使用して、ダーク モードに特定のルールを適用できます。ただし、この方法は、Stripe Elements API で作成されたコンポーネントなど、JavaScript でスタイル設定されたコンポーネントには直接影響しません。

JavaScript でオペレーティング システムの優先カラー スキームを検出するには、window.matchMedia メソッドを利用できます。

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

ユーザーがシステムでダーク モードを有効にしている場合、このチェックは true を返します。この情報を使用して、カスタム スタイルをストライプ エレメントに動的に適用し、ユーザーの好みのインターフェイス テーマとの一貫性を確保できます。

たとえば、ダーク モード時にストライプ エレメントのテキストの色を白に設定したい場合が有効になっている場合は、次のスニペットを使用できます:

const stripeElementStyles = {
  base: {
    color: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? COLORS.white : COLORS.darkGrey,
    // ... other styles
  }
}

さらに、ユーザーの配色設定の変更を監視したい場合は、addEventListener メソッドを使用できます:

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

これらのテクニックを実装すると、Stripe Elements がユーザーの好みの配色にシームレスに適応し、オペレーティング システムやデバイスの設定に関係なく、一貫した視覚的に心地よいエクスペリエンスを提供できるようになります。

以上がストライプ要素をスタイリングするために JavaScript でダーク モードを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。