Webページのダークモード対応（CSS）と検証

2021.11.19

ダークモードとは

ダークモードとは、OSやアプリの設定で画面背景を黒を基調とした配色にしたものを言います。夜間に屋外でスマートフォンを見る時など、ダークモードを利用することで画面の明るさを抑えて目の負担を軽減でき、有機ELを利用したディスプレイでは消費電力を抑えるといったメリットもあります。（個人的には単純にデザインとしてかっこいいのもあります）
Webページもダークモードに切り替えたときに任意にCSSでデザインを変更することができます。今回は簡単にダークモードに対応する方法をご紹介します。

ダークモード対応

メディア特性のprefers-color-scheme: darkの中に適用したいcssを記述します。
今回はシンプルに背景を黒、テキストを白くしてみます。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

デモページ（ダークモードでご確認ください）

ダークモード検証

実際にページをアップしてダークモードに対応したデバイスで確認してもよいのですが、
ダークモードを適用していなくてもGoogle Chromeのデベロッパーツールで擬似的にダークモード・ライトモードを切り替えて確認ができます。

1.Google Chromeのデベロッパーツールを開く
Windows：F12 or Ctrl + Shift + I
Mac：Option + Command + I

2.右上の3点リードメニューから「More tools」→「Rendering」の順に開く

3.Renderingメニューの「Emulate CSS media feature prefers-color-scheme」を「prefers-color-scheme:dark」に設定する

この状態でダークモードに対応したページ（参考：デモページ）を見ると、以下のように変化することが確認できます。

SASSを利用したCSS変数

SASSを利用している場合、予め通常時（ライトモード）とダークモード用のCSSを変数として用意してしておくことで、何度も2種類のモード用CSSを書く必要がなくなり、管理がしやすくなります。下記例ではテキストと背景の色のみ設定していますが、必要に応じて変数を追加・編集してください。

:root {
  $txt-color: #000;
  $bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    $txt-color: #fff;
    $background-color: #000;
  }
}
 
body {
  color: $txt-color;
  background-color: $bg-color;
}

制作済みのサイトをCSS数行でダークモード対応

ダークモード用のCSSを自分で書くのが大変という方や、既に制作済みのサイトを簡単にダークモード対応したいという方のために、たった数行のCSSを追加するだけでページ全体の色を反転させ、ダークモードに対応する方法もあります。（参考サイト）

@media (prefers-color-scheme: dark) {
　//html全体の色を反転させる
  html{
      filter: invert(1) hue-rotate(180deg);
  }
　//画像は再反転させて戻す
  html img{
      filter: invert(1) hue-rotate(180deg);
  }
}

これだけで、ダークモード利用時に以下のように全体の配色を反転することができます。
imgタグに同じCSSをかけているのは、全体を反転すると画像まで反転してネガフィルムのようになってしまうので、もう一度同じCSSをかけて再反転させて元に戻しているためです。（元々黒基調のロゴなどは背景色に埋もれてしまうので、更に反転させるなど調整が必要です）
画像以外にも反転をさせたくないタグやセレクタは追加で記述をする必要があります。

まとめ

最近ではダークモードを利用する方はとても多くなっています。シンプルなデザインのサイトであればひと手間加えるだけで対応が可能なので、是非チャレンジしてみてください。

WEBプログラマー／ O.K

WEB制作に関するご依頼・ご相談はこちら