メディア・クエリ~“prefers-color-scheme”メディア・フィーチャー

“prefers-color-scheme”メディア・フィーチャーについて

“prefers-color-scheme”メディア・フィーチャーはユーザーが明るい色遣いを望むか暗い色遣いを望むかを表します。

“prefers-color-scheme”メディア・フィーチャーはユーザーが望んでいるカラー・スキームを検査します。

どのようにしてユーザーが求める色遣いが示されるかはデバイスやユーザー・エージェントによって異なりますが、一般的にデバイスのOS全体のテーマの設定やユーザー・エージェントの設定によって決められます。

指定できる値

サンプルコード

@media all and (prefers-color-scheme: light) {

p.sample {

background-color: #00a497; /*■*/
text-decoration: underline dotted;

}

}

@media all and (prefers-color-scheme: dark) {

p.sample {

background-color: #e198b4; /*■*/
text-decoration: underline wavy;

}

}

<p class="sample">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

猫は、上のかぎり黒くて、ことはみな白き。