皆さん、こんにちは。

業務改善を行う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サイトが『ダークモード』に対応していくのでしょうか．．．