← Playgrounds一覧に戻る
light-dark() image values
light-dark()に画像を渡し、要素に適用されたcolor-schemeに応じてグラデーションやurl()を切り替えられます。
Playground
color-schemeを切り替えて画像を見る
枠のcolor-schemeを切り替えると、background-imageに渡した2つのグラデーションが画像ごと入れ替わります。
枠のcolor-scheme
枠のbackground-imageには、light-dark()に直線グラデーションと放射状グラデーションを渡しています。ライトは斜めの直線、ダークは中心が明るい放射状で、light darkではOSの設定に従います。