azukiazusa.dev
戻る
azukiazusa

azukiazusa

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

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

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

azukiazusa

azukiazusa

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

azukiazusa

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

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

azukiazusa

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