カラースキームの制御をカスタムデータ属性のみから、CSSのcolor-schemeおよびlight-dark関数を使用した制御に変更する

[kaminorse]

概要

カラースキームの制御をカスタムデータ属性のみから、CSSのcolor-schemeおよびlight-dark関数を使用した制御に変更する

例

ライトモード時に赤文字、ダークモード時に青文字の場合、現行と新を比較すると下記のようになる。

現行

:root {
  color-scheme: light dark;
}

.smaroot {
  color: red;
}

@media (prefers-color-scheme: dark) {
  .smaroot {
    color: blue;
  }
}

[data-color-scheme=dark] {
  .smaroot {
    color: blue;
  }
}

新

:where(:root) {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
 :root {
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
 :root {
    color-scheme: dark;
  }
}

.smaroot {
  color: light-dark(red, blue);
}