CSSのlight-dark()関数が画像もサポート！ これでライトテーマとダークテーマの対応がさらに簡単になります

Webサイトをライトテーマとダークテーマ対応にするには、CSSのlight-dark()関数を使用すると今までより簡単に実装できます。

これまではlight-dark()関数はカラー値（<color>）のみしかサポートしていませんでしたが、画像ファイル（<image>）もサポートされ、ロゴ画像や背景画像などをライトテーマとダークテーマで切り替えることができるようになります。

More Easy Light-Dark Mode Switching
by Bramus!

• はじめに
• light-dark()関数に欠けていたピース
• ブラウザのサポート
• light-dark()関数のフォールバック
• <color>値や<image>値以外は？
• 今後の展望: @function + color-scheme() が救世主になる

はじめに

2023年に私は当時画期的だったlight-dark()関数を使ったCSSによるカラーの切り替えについて記事を書きました（翻訳記事）。この記事では、light-dark()関数がカラーの扱い方を大きく変える画期的な機能で、@media (prefers-color-scheme: ...)を繰り返し記述しないとできなかったことがシンプルにプロパティを宣言するだけで実現できることを解説しました。

しかし、そこには制限が1つありました。
それはカラーに限定されていたことです。ユーザーのカラースキームに基づいて背景画像やロゴ画像を切り替えたいときは、従来の@media (prefers-color-scheme: ...)で対応せざるを得ませんでした。

そして、ここに朗報があります！
仕様が変更され、light-dark()関数が画像もサポートするようになりました！

light-dark()関数に欠けていたピース

CSSでライトテーマとダークテーマで背景画像を設定したい場合、下記のように記述している人が多いと思います。

このCSSには、欠点があります。
記述があちこちに散らばっており、color-schemeプロパティによるローカルのcolor-schemeの上書きを無視して、グローバルのcolor-schemeのみをチェックしてしまう点です。

この欠点はlight-dark()関数で解決します。
コードをコンパクトにまとめ、ローカルで指定されたcolor-schemeの値にも対応できます。light-dark()が<image>値もサポートするようになった最新版ではコード全体を1つのルールにまとめることができ、ローカルのcolor-schemeの上書きを反映させることができます。

light-dark()関数を使用すると、下記のように記述できます。

これは簡単で、便利ですね！

1つだけ注意事項があります。
light-dark()関数の引数には、2つの<color>値または2つの<image>値のいずれかを渡す必要があります。そして、<color>値と<image>値を混在させることはできません。その理由については、後述します。

ブラウザのサポート

2026年3月現在、各ブラウザのサポート状況は下記の通りです。

• Chromium

  Chromium 148.0.7742.0以降で、chrome://flags/#enable-experimental-web-platform-featuresのフラグを有効にすることで利用できます。安定版のリリース日はまだ未定で、最新情報はCrBug #491829958で分かります。

• Firefox

  Firefox 150でサポートされます（2026年4月21日予定）。

• Safari

  サポート対象外、最新情報はWebKit Bug #309689で分かります。

light-dark()関数のフォールバック

もし今日からlight-dark()関数の新機能を使いたい場合は、フォールバックを用意して使用することをお勧めします。画像のサポート状況を検出するには、linear-gradient() を使用してテストできます（CSSでは<image>として扱われます）。

実際のコードは、デモページで確認できます。

See the Pen
CSSのlight-dark()関数、画像サポートのテスト by coliss (@coliss)
on CodePen.

<color>値や<image>値以外は？

<color>値や<image>値以外のサポートについては、現状未解決です。以前の記事で説明したように、CSSはlight-dark()関数をどこでも単純に受け入れることができません。なぜなら、パーサーは解析対象の値の型を事前に把握する必要があるからです。

現在のところ、light-dark()関数は、2つの内部バリアントが定義される予定です。1つは<color>値で、もう1つは<image>値です。

各バリエーションには使用可能な場所の制限があります。カラーを扱うバージョンは<color>が許可されている場所でのみ使用でき、画像を扱うバージョンは<image>が許可されている場所でのみ使用できます。

もし、より多くの種類の値をサポートする必要があれば、内部のバリエーションをさらに多く用意しなければならなくなります。

このように2つのバリエーションに分けることで、CSSパーサーは解析時に無効な宣言を排除できるようになります。これが、引数内でこれらのタイプを混在させることができない理由です。たとえば、<color>と<image>の混在を受け入れた場合、background: red light-dark(blue, url(dark.png));のようなCSSが可能になります。ダークテーマではこのCSSで問題はありませんが、ライトテーマではbackground: red blueになってしまい、これは無効な宣言です。

今後の展望: @function + color-scheme() が救世主になる

将来的には、CSSのカスタム変数とcolor-scheme()を使用することで、<color>や<image>のカラースキームに依存しない値を扱う方法が登場するでしょう。詳細については、あらゆる値に対応するカスタム関数--light-dark()の実装に関する以前の記事をご覧ください。CSSはたった3行で、CSSだけ記しておきます。