CSS3のメディアクエリを利用してWebサイトをダークモードに対応させる

昨今、WindowsやMacといったOSからアプリケーション、Webサイトなどなど何かとダークモードに対応してきています。

普段からPCやタブレット、スマートフォンといったコンピュータに触れる機会が多くなり、デザインの配色によっては長時間利用していると、目に負担がかかり疲れを感じるようになります。

そこで最近、負担がかかりにくいダークモード設定へ切り替えることができる仕様が採用されはじめました。

ダークモードのメリットとしては、

目に優しい
バッテリー消費量を低減

といった2点でしょう。

特に夜間は黒を基調とした配色のデザインにすることで、目への負担を軽減することができます。

また、バッテリー消費については、有機ELディスプレイの機種は、発光形式の違いで黒い部分は発光しないのでバッテリーが長持ちします。
iPhoneX以降、iPhoneXs他、ソニーのXperiaのいくつかの機種が有機ELを採用しています。
ちなみにiPhoneXRは液晶ディスプレイになります。

WebサイトやWebアプリケーションはこれからもっともっと優しさを追求していくことになるでしょう。

ここでは、Webサイトをダークモードに対応させる方法をご紹介します。
CSS3のメディアクエリの特性「prefers-color-scheme」を利用して、端末のダークモード設定を判断していきます。

以下のリンクから、Webブラウザのサポート状況が確認できます。

Can I use (prefers-color-scheme)
https://caniuse.com/#search=prefers-color-scheme

主要ブラウザは問題なくサポートしています。

メディアクエリを利用してダークモードに対応

実際にどんな感じなのか、皆さんも試しに簡単なサンプルコードを書いてみてください。

HTML

<main>
  <h1>DARK MODE</h1>
</main>

CSSでメディアクエリを利用してダークモードを判断していきます。

CSS

body {
  min-height: 100vh;
  color: #333;
  background: #f7f7f7;
}
 
h1 {
  text-align: center;
  font-size: 4rem;
  padding: 160px 0 0;
}
 
@media (prefers-color-scheme: dark) {
  body {
    color: #fff;
    background: #000;
  }
}

サンプルコードでは、通常の配色（ライトモード）とダークモードとでテキストの色と背景色を変更しています。

メディアクエリの特性「prefers-color-scheme」で「dark」とすることで、ダークモード設定を判別します。
その中でダークモードの場合のデザインのCSSを記述していきます。
CSSの優先順位を忘れずに、通常のデザインの後に記述してください。
もちろん、セレクタの指定も優先順位を気をつけて。

通常のデザインは今までどおり記述すればいいですが、「prefers-color-scheme: light」とすることで、ライトモードに対応させることもできます。

例えば、rootからの指定を変数「CSS Variables（カスタムプロパティ）」を使っていく場合ですと、以下のようなコードになります。

CSS

@media (prefers-color-scheme: light) {
  :root {
    --main-txt-color: #333;
    --main-bg-color: #f7f7f7;
  }
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --main-txt-color: #fff;
    --main-bg-color: #000;
  }
}
 
body {
  min-height: 100vh;
  color: var(--main-txt-color);
  background-color: var(--main-bg-color);
}
 
h1 {
  text-align: center;
  font-size: 4rem;
  padding: 160px 0 0;
}

こちらのほうが汎用性が高そうですね。

今回は極端にダークモードでは黒と白を使いましたが、暗めの配色のデザインを採用し、コンテンツやボタンなどはわかりやすいデザインにするなど、ダークモードでもそれなりに良いデザインを構築していってもらえばと思います。

また、CSS Color Module Level 5に新たに追加されたlight-dark()関数を使うことでも、ライトモードとダークモードのスタイルを指定することができます。
light-dark関数の使い方については、以下の記事でご紹介しています。