light-dark() で背景画像もライト／ダークで切り替える
light-dark() が色だけでなく画像も受け取れるようになり、background-image などをメディアクエリなしで切り替えられる。
どんな時に使う？
- ヒーロー画像や背景パターン、ロゴ、アイコンをダークモード用に差し替えたいとき。
- 従来は
@media (prefers-color-scheme: dark)の中でカスタムプロパティを書き換えていたが、その方法だと OS 全体の設定しか見ないため、ページの一部だけcolor-scheme: darkにした場所では切り替わらない。light-dark()はその要素で実際に使われているcolor-schemeに従うので、部分的なダーク領域でも正しく動く。
コード
css
:root {
color-scheme: light dark; /* これがないと常にライト側が選ばれる */
}
.hero {
background-image: url(day.svg); /* 未対応ブラウザ向けのフォールバック */
background-image: light-dark(url(day.svg), url(night.svg));
}- 1つ目の引数がライト、2つ目がダーク。
url()のほかimage-set()、グラデーション、noneも使える。 background-imageだけでなくlist-style-image、border-image-source、cursor、contentでも使える。- 色と画像を混ぜることはできない（2つとも色、または2つとも画像）。
- 対応判定は
@supports (background-image: light-dark(none, none)) { ... }で書ける。
注意点・対応状況
- Chrome / Edge 150+、Firefox 150+、Safari 27+ で対応（2026-10 時点）。それ以前のブラウザでは宣言ごと無視されるので、上のように通常の
background-imageを先に書いておく。 - 色での
light-dark()の使い方とフォーム部品のダーク対応は ダークテーマでは color-scheme も指定してフォーム部品・スクロールバーを暗くする を参照。