light-dark()関数のSVGでの利用

CSSでlight-dark()関数を使う場合、多くの場合は:rootでcolor-schemeプロパティーを指定しておく。SVGではsvg要素などでstyle属性を使い、color-schemeプロパティーを書いておく。style要素でも良いが、ほぼ全て視覚表現のためのSVGでは、HTMLと違ってコードの断片化となり、書きづらいだろう。color-scheme属性というものはない(ようだが、変わるかもしれない)。

<svg
  xmlns="http://www.w3.org/2000/svg"
  ...
  style="color-scheme: light dark;">
  <path
    d="..."
    fill="light-dark(black, white)"/>
</svg>

SVGでカラー・スキームに応答するためには、これまではstyle要素にCSSとしてまとめざるを得なかった。メディア・クエリーを書かなくてはならないからだ。light-dark()関数が使えるようになると、オブジェクトそれぞれのfill属性などに直接書け、style要素が不要になる。また、そうなることでオブジェクトそれぞれがカラー・スキームに応答することが明確になる。