CSS Reference

light-dark()

プロパティに2つの色を設定する

prefers-color-scheme メディア特性を使用することでユーザーが使用しているカラーモード、例えばライトモードやダークモードなどに応じたスタイルを出し分けることができますが、light-dark() 関数も同様のカラーモードによる色の出し分けを行うことができます。

light-dark() 関数は、<color> データ型の値が許容される場所で使用することができ、引数には2つの色の値を、カンマ（,）で区切って指定することができます。

ユーザーが設定しているカラーモードが light に設定されている場合、あるいは何も設定されていない場合には1つ目に指定された値が適用され、ユーザーが設定しているカラーモードが dark に設定されている場合には2つ目の指定された値が適用されます。

light-dark() 関数を使用する場合は、ルート要素に color-scheme プロパティを下記のように指定し、文書内の全要素が、ライドモードとダークモードの両方をサポートしていることを示しておきます。

:root {
  color-scheme: light dark;
}

その上で、下記のように指定することで、ユーザーが使用しているカラーモードに応じた色が表示されます。

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

light-dark()のサンプルソース

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連するCSS関数

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome