OSで暗いところ用のダークなモードの切り替えは、だいぶ浸透してきました。
サイト側でも個別でダークモードを用意していたサイトもあるかもしれません。
やはりそれではUX的によろしくないのでCSSで連動することができるよう標準化されました。
以下、ダークモードの状態を検知して、出し分けています。
OSのダークモードがOFFです
OSのダークモードがONです
OSのダークモードをONにしてアクセスするとこの部分のスタイルが反転します
@media で出しわけができます。
@media (prefers-color-scheme: dark) {}
CSS
#demo_dark {
display: none;
}
#demo_div {
background-color: rgb(0, 255, 170);
color: rgb(20, 20, 68);
padding:10px;
margin:20px 0;
border-radius:10px;
}
@media (prefers-color-scheme: dark) {
#demo_normal {
display: none;
}
#demo_dark {
display: block;
}
#demo_div {
background-color: rgb(20, 20, 68);
color: rgb(0, 255, 170);
}
}
ブラウザの対応はこちらをチェック
