近頃のPCやスマホ用OS、または個別のアプリケーション単体でも、画面UIの色調を暗色系に変えて黒っぽい外観にすることで輝度を抑えた表示にする機能、「ダークモード」が搭載されるようになってきました。通常使われる白っぽい表示（ライトモード）は、日中や照明の効いた明るい場所では問題ありませんが、夜間や暗い部屋では明るすぎて周囲の迷惑になったり、視覚に悪い影響を与える原因に繋がります。ダークモードはその対策として登場したと思われますが、さらに有機ELディスプレイを使用した機器の場合は省電力化も見込めるそうで、様々なメリットがあります。とはいえ、やはり「クールでカッコいいから」というのが一番の理由でダークモードに設定するというのが本当のところではないでしょうか。

ところでダークモードを使っていて気になるのが、「Webサイトの見た目はダークに切り替わってくれない」という点です。せっかくブラウザを含め画面全体が黒基調になっているのに、Webサイトの方は相変わらず白っぽい画面のままでは、カッコよさを求めてダークモードを選んだ意義が損なわれてしまいます。Webコンテンツの中身もOSの設定に応じて見た目を変えられないか…。

といったニーズに応えるため、CSSには「prefers-color-scheme」というメディアクエリーが用意されています。これを利用すると、閲覧者の環境を判別してそれに応じた配色を適用でき、「ダークモードの場合は黒っぽくする」という指定ができます。気になる実装状況についてこちらを参照すると、この記事を書いている時点では以下の通りです。

• Firefox: 対応済み
• Chrome: 対応済み（昨日(7/31)公開されたChrome 76から有効になりました！）
• Safari: 対応済み

いずれもデスクトップ、モバイル共に対応済みです。このように、主だったブラウザ環境では既に利用可能となっていますので、活用のための下地は整っており実用に値すると言えます。

ダークモードの設定切り替え（macOSの場合）

それでは、実際に試してみましょう。下枠に、ダークモードに対応させたコンテンツを表示しています。OSの設定（macOSでは「システム環境設定→一般→外観モード」）でダークモードを切り替えると、それに応じて見た目が変化します。

ダークモードの場合の配色を設定するには簡単で、「@media (prefers-color-scheme: dark)」というメディアクエリーの内側に色指定を入れればOKです。

div {
  background-color: #fff;
}

p {
  background-color: #eee;
}

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

  div {
    background-color: #000;
  }

  p {
    background-color: #222;
  }
}

以上、CSSでWebサイトをダークモードに対応させる方法をご紹介しました。ただ、各Webサイトが個別にダークモード用の配色を用意しなければならないため、それぞれの運営者の対応が待たれることとなります。制作側としてはライト、ダークの2種類の色調を考えるという手間が増えてしまうため、今後普及するかどうかはまだ不明なところですが、利用者側にとってはサービスの使い勝手を測る上での観点の一つとなりますので、動向を注視していきたいと思います。