CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点

iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。
ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。

Dark mode in a website with CSS
by Tom Brow

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• CSSのみで対応するWebサイトのダークモード
• ダークテーマでお勧めのテキストと背景のカラー
• ダークテーマではカラーの彩度は下げる
• ダークモードについてさらなる情報

CSSのみで対応するWebサイトのダークモード

まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。

https://tombrow.com/

ダークモードへの対応は、CSSのメディアクエリで「prefers-color-scheme: dark」を使用するだけで実現できます。

このCSSは主要なデスクトップブラウザのサポートは完了しており、スマホブラウザはSafari for iOS, Android Browserなどで機能します。

prefers-color-schemeのサポートブラウザ

古いSafariなどにも使用したい場合は、Polyfillもあります。

• Prefers Color Scheme -GitHub
  Safari 6以降、Internet Explorer 9以降、Edgeもサポート、デモページ。

ダークテーマでお勧めのテキストと背景のカラー

上記のCSSで最も重要なのは、テキストと背景のカラーを上書きするスタイルです。

テキストのカラーにはピュアホワイトを避けることをお勧めします。同時に、背景のカラーにもピュアブラックを避けることをお勧めします。
参考: Avoid pure white
UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント

ダークテーマではカラーの彩度は下げる

リンクに使用するアクセントカラーは背景をダークにすると粗く見えてしまうため、彩度の低いもので上書きします。

写真画像も背景がダークだと粗く見えます。多くの人がダークモードで彩度を下げた画像を好むことが判明しています。
参考: Re-Colorization for Dark Mode

ベクター画像は異なる方法で処理するため、より具体的なセレクタを使用します。
参考: Invert vector graphics and icons

ダークモードについてさらなる情報

ここで挙げたものは、Thomas Steiner氏のHello darkness, my old friendから得た知識で、記事ではディスプレイの配色について興味深い歴史も含まれています。