CSS: ダークモードで値を切り替える light-dark 関数

light-dark 関数は CSS のカラー関数で、引数に 2 つのカラー値を取り、ライトモードのときには 1 つ目の値をを、ダークモードのときには 1 つ目の値を返します。

color-scheme プロパティの値もしくはユーザーの OS のダークモード設定によって切り替わります。

:root {
  color-scheme: light dark;
}
 
html {
  color: light-dark(#333, #ccc);
  background-color: light-dark(#fff, #000);
}

今まで prefers-color-scheme メディアクエリを使って実装していたものを簡潔に書けるようになります。

html {
  color: #333;
  background-color: #fff;
}
 
@media (prefers-color-scheme: dark) {
  html {
    color: #ccc;
    background-color: #000;
  }
}

ただし、light-dark 関数はカラー値のみにしか使えないため、prefers-color-scheme メディアクエリでできることよりも制限されています。