『Windows 10』に『macOS Mojave』や『iOS 13』と、各OSが『ダークモード』の対応を行ってきていますが皆さんは使われていますか？
皆さん、こんにちは。
業務改善を行うIT・業務コンサルタント、高橋です。
最近流行り？の『ダークモード』、これに批判的な方もいるようですが個人的には気に入っています。
単純な話で、少しでも目の負担を軽減したい、見やすくしたいということからです。
（私はブルーライト軽減のために昼間でもiPhoneは『ナイトシフト』を使っています。）
しかし、ベースとなるOSや一部のアプリケーションはそれに対応しているものの、Webサイトに関してはほとんど対応していないように思えます。
今日はそんな『ダークモード』の話題です。
Webサイトをダークモードに対応させる
Webサイトを『ダークモード』に対応させるためには『prefers-color-scheme』というものを使います。
この『prefers-color-scheme』を使って『ダーク（黒）』の場合の条件をCSSに記述すれば対応できます。
@media (prefers-color-scheme: dark) {
body {
background-color: #000;
color: #fff;
}
}
といった感じです。
変更箇所が複数に渡る場合は『var(–変数)』で対応すると便利です。
:root {
–main-bg: #fff;
–main-text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
–main-bg: #000;
–main-text: #fff;
}
}
body {
background-color: var(–main-bg);
color: var(–main-text);
}
といった感じです。
さて、どれくらいのWebサイトが『ダークモード』に対応していくのでしょうか．．．