【CSS Modules】color-schemeプロパティの使い方
color-schemeプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
color-schemeプロパティは、Webサイトがユーザーのデバイスのカラースキーム（ライトモードやダークモードなどのテーマ）にどのように適応すべきかをブラウザに伝えるためのプロパティです。このプロパティを設定することで、Webページの基本的な配色が、ユーザーのシステム設定に沿って自然に表示されるようになります。
このプロパティは主に、スクロールバー、フォームコントロール、組み込みUI要素などの、Webページの一部ではないシステムUIのレンダリングに影響を与えます。例えば、ユーザーがデバイスをダークモードに設定している場合、このプロパティを使用することで、ブラウザはそれらの要素をダークテーマに合わせて表示するかどうかを判断します。
指定できる主な値は normal、light、dark、そして only light です。
normal を指定すると、ブラウザは自身のデフォルトのカラースキーム設定、または親要素から継承された設定に従います。
light は、そのWebページがライトモード表示に適していることをブラウザに伝えます。
dark は、そのWebページがダークモード表示に適していることをブラウザに伝えます。
そして only light は特別な値で、Webページが常にライトモードで表示されるべきであることを示します。この値が指定されると、ユーザーがデバイスをダークモードに設定していても、ブラウザはそのページのシステムUIをダークモードでレンダリングしようとはせず、常にライトモードで表示します。これは、ダークモードでの表示にまだ対応できていない場合などに、意図しない表示崩れを防ぐために有用です。
このプロパティを適切に活用することで、Webサイトはユーザーの閲覧環境に合わせたより良い体験を提供し、目の負担を軽減したり、アクセシビリティを向上させたりすることができます。
構文(syntax)
1color-scheme: light dark;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません