ダークモード実装がとても楽になりそうなCSS関数 light-dark() が待ち遠しい

こんにちは森田です。
今回はダークモードの実装時にとっっっても楽になりそうなCSS関数が策定中なので紹介します。

light-dark() 関数 とは

light-dark() 関数は CSS Color Module Level 5 で策定されている新しい色の関数です。

light-dark( <color>, <color> )

This function computes to the computed value of the first color, if the used color scheme is light or unknown, or to the computed value of the second color, if the used color scheme is dark.

https://drafts.csswg.org/css-color-5/#funcdef-light-dark

この関数は、使用されている配色がライトモードか不明な場合は1番目（第1引数）の色の計算値を計算し、ダークモード場合は2番目（第2引数）の色の計算値を計算します。

今までのダークモードカラー指定

今までのダークモードはメディアクエリ prefers-color-scheme: dark を使いルールセットから分けて指定する必要があります。

@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background-color: #222;
  }
}

light-dark() 関数でのダークモードカラー指定

light-dark() 関数は先述の通り第1引数にライトモード、第2引数にダークモードの色を指定します。

そして、ルートにcolor-scheme の宣言が必要です。

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#333, #fff);
  background-color: light-dark(#eee, #222);
}

ライトモードとダークモードを同時にしてすることができて直感的ですね。
カスタムプロパティも使えますのでまとめて指定や変更することも可能です。

light-dark()のブラウザ対応状況

ブログ執筆時（2023年12月現在）Firefox 120 以上のみが対応しております。
首を長くして待ちましょう。待ち遠しい！

所感とまとめ

light-dark() 関数とても便利そうですね。
便利そうではありますが、既存の CSS に後から追加して書いていくのは結構大変そうなので実装時に使える時期が来たら採用していこうかなと思いました。

light-dark() は同時指定、メディアクエリprefers-color-scheme: dark は後から上書きなイメージですね。ただ、同時に使うと見通しが悪くなるかもしれないので、設計やデザインの時点で検討していくことが必要そうだなと感じました。

関連リンク

• Reacting to the used color-scheme: the light-dark() Function
• light-dark() – CSS: Cascading Style Sheets | MDN
• “light-dark()” | Can I use…