インタラクティビティ
要素のカラースキームを制御するためのユーティリティ。
| クラス | スタイル |
|---|---|
scheme-normal | color-scheme: normal; |
scheme-dark | color-scheme: dark; |
scheme-light | color-scheme: light; |
scheme-light-dark | color-scheme: light dark; |
scheme-only-dark | color-scheme: only dark; |
scheme-only-light | color-scheme: only light; |
要素のレンダリング方法を制御するには、scheme-light や scheme-light-dark などのユーティリティを使用してください
システムカラースキームを切り替えて、違いを確認してください
scheme-light
scheme-dark
scheme-light-dark
<div class="scheme-light ..."> <input type="date" /></div><div class="scheme-dark ..."> <input type="date" /></div><div class="scheme-light-dark ..."> <input type="date" /></div>プレフィックスa color-scheme ユーティリティと、次のようなバリアント dark:* を使用して、その状態でのみユーティリティを適用する
<html class="scheme-light dark:scheme-dark ..."> <!-- ... --></html>バリアントのドキュメントで、バリアントの使用方法の詳細をご覧ください。