CSSの新しい関数「color-scheme()」を使用すると、カスタム関数であらゆる型の値を設定できるようになります
Post on:2025年10月15日
sponsorsr
先日、CSSワーキンググループでCSSの新しい関数としてcolor-scheme()が追加され承認されました。ブラウザに実装されるのはまだ先ですが、この関数を使用すると、要素で使用されているカラースキームを取得でき、さらには@containerクエリとif()関数の両方で使用できます。
color-scheme()関数が使えるようになると、どのように便利なるかを紹介します。
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
@function + CSS if()のようにCSSのカスタム関数とCSSのif()関数を組み合わせることで、あらゆる値で動作するカスタム関数（--light-dark()の使い方を解説します（値はカラーだけではありません！）。
この関数は、CSSのカスタムプロパティ（--scheme）をクエリするスタイルクエリに依存しており、--scheme自体はcolor-schemeプロパティの値に反映するように設定されています。
最近仕様に定義されたcolor-scheme()関数が使えるようになれば、この間接的な処理は不要になり、コードははるかにシンプルになります。
注意:
ここで解説するCSSの機能は今後に関するもので、2025年10月現在使用は出来ません。Chromeではフラグを設定することで利用可能ですが、color-scheme()は現在仕様上の存在です。
CSSのコード
コードを知りたい場合は、次のコードをご覧ください。
|
1 2 3 |
@function --light-dark(--l, --d) { result: if(color-scheme(dark): var(--d); else: var(--l)); } |
使用方法はCSSのlight-dark()関数に似ていますが、異なる点はあらゆる型の値で使用できることです。
|
1 2 3 4 5 |
#element { color-scheme: light dark; color: light-dark(#333, #e4e4e4); background-image: --light-dark(url(light.svg), url(dark.svg)); } |
CSSのcolor-scheme()関数
この--light-dark()カスタム関数は新しいcolor-scheme()関数によって実現されています。color-scheme()関数は先日CSSワーキンググループで追加が承認されたばかりの新機能です。
color-scheme()関数を使用すると、要素で使用されているカラースキームを取得できます。そして、@containerクエリとif()関数の両方で使用できます。
参考: CSSでif()関数が使えるようになり、if else文の条件付きで値を設定できるようになります
下記のCSSはカスタム関数ではなく、要素に直接この関数を使用できる例です。
|
1 2 3 4 |
#element { color-scheme: light dark; background-image: if(color-scheme(dark): url(dark.svg); else: url(light.svg)); } |
この新しいcolor-scheme()関数が必要な理由は、color-schemeプロパティがサポートされるカラースキームのリストのみを列挙するからです。light darkに設定すると、要素がライトとダークのいずれにもレンダリングを適用できることを示しています。これはライトとダークの設定によって制御され、結果として使用される値は列挙されたリストの値のいずれかになります。
また、color-schemeに値を1つだけ設定することで、コンポーネントを特定のモードに強制的に設定することもできます。たとえば、color-scheme: light;と設定すると、OSの指定に関係なく、コンポーネントはライトモードに強制されます。
sponsors
