CSS - light-dark()

概要

形式light-dark(light-color, dark-color)
サポートhttps://caniuse.com/mdn-css_types_color_light-dark

説明

非ダークモード時の色と、ダークモード時の色を指定します。color-scheme に light dark を指定している場合に有効です。ブラウザのモードは、例えば Android の Chrome の場合、ブラウザの [設定]-[モード]-[ダークモード] で切り替えることができます。

light-color
非ダークモード時の色を指定します。
dark-color
ダークモード時の色を指定します。

使用例

下記の例では、非ダークモード時は #333 で、ダークモード時は #ccc で表示します。

CSS
:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333, #ccc);
}
Copyright (C) 2025 杜甫々
初版：2025年5月18日、最終更新：2025年5月18日
http://www.tohoho-web.com/css/func/shape.htm