CSSのlight-dark()関数が画像もサポート！もうテーマ切り替えに悩まない、爆速実装の未来へ

Web制作の常識が変わる！light-dark()関数が画像もサポート！

皆さん、こんにちは！Web制作やAI開発の現場で日々コードと格闘しているエンジニアの皆さん、お待たせしました！今回は、CSSの分野でまさに「待ってました！」と膝を打つような超朗報をお届けします。

以前、CSSのlight-dark()関数がカラー値の切り替えを劇的にシンプルにした、という記事を書いたのを覚えているでしょうか？@media (prefers-color-scheme: ...)を連発することなく、プロパティ一つでライトテーマとダークテーマのカラーを切り替えられるようになったあの画期的な機能です。しかし、そこには一つだけ、Web制作者の頭を悩ませる「欠けていたピース」がありました。

そう、それは画像（<image>）のサポートです！

これまで、ユーザーのカラースキームに合わせてロゴ画像や背景画像を切り替えたい場合、依然として@media (prefers-color-scheme: ...)を使うしかありませんでした。これがコードを複雑にし、管理を面倒にしていましたよね？

しかし、ついにその制限が打ち破られました！
仕様が変更され、light-dark()関数が画像もサポートするようになったんです！これはWeb制作のワークフローを大きく変え、ライトテーマとダークテーマの対応をさらに簡単に、そしてスマートにする画期的なアップデートと言えるでしょう。

どう使える？light-dark()関数で画像切り替えが劇的にシンプルに！

では、具体的にこの新機能が私たちのコードにどのような変化をもたらすのか、見ていきましょう。

これまでの画像切り替え（お悩みコード）

ライトテーマとダークテーマで背景画像を切り替えたい場合、多くの人が次のようなCSSを書いていたのではないでしょうか？

:root {
  --bg-image: url(light-pattern.png);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-image: url(dark-pattern.png);
  }
}

.element {
  background-image: var(--bg-image);
}

このコードには、いくつかの課題がありました。

• 記述が散らばる: :rootと@mediaブロックに分かれてしまい、一目で全体の挙動を把握しにくい。
• ローカルのcolor-schemeを無視: この方法だと、グローバルなcolor-scheme（OSの設定など）しか参照せず、特定の要素にローカルでcolor-scheme: dark;などを指定しても、画像が切り替わらないという問題がありました。

light-dark()関数を使った新しい画像切り替え（爆速コード！）

それが、light-dark()関数が画像もサポートするようになったことで、こんなにシンプルになるんです！

.element {
  color-scheme: dark;
  background-image: light-dark(url(light-pattern.png), url(dark-pattern.png));
}

どうですか？たったこれだけで、要素に指定されたcolor-schemeの値に基づいて、ライトテーマ用の画像（light-pattern.png）とダークテーマ用の画像（dark-pattern.png）が自動で切り替わるようになります！

コードがコンパクトにまとまり、ローカルで指定されたcolor-schemeの値にも対応できるため、より柔軟でパワフルなテーマ対応が可能になります。これはまさに、Web制作の効率化と保守性向上に直結する大きな進化です！

一点だけ注意点があります！ light-dark()関数の引数には、2つの<color>値、または2つの<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で確認できます。

このように、まだ実験的な段階の機能ですので、今日から実プロジェクトで積極的に使っていくには、フォールバックの準備が必須です。

画像のサポート状況を検出するには、CSSの@supportsルールと、<image>として扱われるlinear-gradient()関数を組み合わせてテストするのがおすすめです。

@supports (background-image: light-dark(linear-gradient(white, white), linear-gradient(black, black))) {
  /* light-dark()関数での画像切り替えロジックはここに記述 */
  .element {
    background-image: light-dark(url(light-pattern.png), url(dark-pattern.png));
  }
}

@supports not (background-image: light-dark(linear-gradient(white, white), linear-gradient(black, black))) {
  /* light-dark()がサポートされていない場合のフォールバック */
  .element {
    background-image: url(light-pattern.png); /* デフォルトはライトテーマ */
  }
  @media (prefers-color-scheme: dark) {
    .element {
      background-image: url(dark-pattern.png);
    }
  }
}

このように、@supportsを使って機能の有無を検出し、未サポートのブラウザでは従来の@mediaを使ったフォールバックを用意することで、安心して新しい機能を試すことができます。

将来的には、@function + color-scheme()といった、さらに柔軟なカラースキーム対応の仕組みが登場する可能性も示唆されており、CSSの進化から目が離せませんね！

まとめ：Web制作の未来を切り開くlight-dark()関数

CSSのlight-dark()関数が画像もサポートするようになったことで、Webサイトのライトテーマ・ダークテーマ対応は、これまでになくシンプルかつ効率的に行えるようになります。コードはより読みやすく、管理しやすくなり、ユーザー体験も向上すること間違いなしです。

まだ実験的な機能ではありますが、@supportsを使ったフォールバックを用意しながら、ぜひ皆さんのプロジェクトでもこの新しい機能を試してみてください。Web制作の未来を切り開く、このエキサイティングな進化に一緒に乗り遅れないようにしましょう！