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

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

サイトのキャプチャ

Dark mode in a website with CSS
by Tom Brow

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

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

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

https://tombrow.com/

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

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

サイトのキャプチャ

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

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

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

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

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

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

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

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

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

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

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

より洗練されたWYSIWYGデスクトップパブリッシングの出現により、仮想ドキュメントを物理的な紙に似せるというアイデアが一般的になりました。

世界初のWebブラウザであるWorldWideWebは、この方法でWebページを表示しました。そして興味深いことに、2番目のブラウザであるLine Mode Browserは、ダークの背景にグリーンのテキストでした。

sponsors

top of page

©2020 coliss