CSS - color-scheme

• トップ
• CSSリファレンス
• color-scheme

概要

サポート (説明)

• https://caniuse.com/mdn-css_properties_color-scheme

説明

スマートフォンなどのダークモードに対応します。値は複数指定することができます。

使用例

下記の様に指定しておくと、スマホがダークモードであればダークモードに、非ダークモードであれば非ダークモードで表示されます。

:root {
  color-scheme: light dark;
}

Webページをダークモードに対応させるには、下記の様に prefers-color-scheme を使用する方法もあります。

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

Chrome 123、Safari 17.5 以降では light-dark() も使用できるようになりました。

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333, #ccc);
}

リンク

• https://drafts.csswg.org/css-color-adjust/#color-scheme-prop
• https://developer.mozilla.org/ja/docs/Web/CSS/color-scheme