CSS で Web サイトをダークモードに対応
ここ数年、Windows 10 や iOS などで黒を基調としたデザイン、いわゆるダークモードが増えてきています。Web サイトの背景は基本的に白色が多いと思いますが OS の色モードに合わせて Web サイトのカラーもダークモードに合わせてみたいと思います。面倒そうに思えますが意外にも単純な方法で実現できます。
CSS を使用して Web サイトをダークモード対応にする
以下のコードを css に追記します。
@media ( prefers-color-scheme: dark ) {
body {
background-color: #333333;
color: #ffffff;
}
}@media ( prefers-color-scheme: dark ) ｛｝内に、要素に対する色の指定を入れればダークモード対応が完了です。注意点として、Web ブラウザは上の行から順に指定を読み込んでいくため同じ要素に対する指定が複数ある場合、後に記述された指定で上書きされます。ダークモード対応の指定は一番下に記述しましょう。
切り替えをアニメーションにする（おまけ）
いきなり配色を切り替えるのもいいのですがアニメーションで少しずつ色が変わるようにするのも面白いかもしれません。
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #ffffff;
transition: 1s;
}
}例として transition: 1s; の指定で 1秒間、色をアニメーションで変化させます。ライトモードの色指定している部分にも記述しておきましょう。
対応する Web ブラウザ
- Microsoft Edge 76 ～
- Safari 13 ～