「prefers-color-scheme(CSS)」による、Webサイトのダークモード

投稿者: | 2020-03-08

Webブラウザのコンテンツ部分を、ホストOSのテーマと同期させて制御する、CSSのメディア特性

Appleが「macOS Mojave 10.14」より新たに導入し、「iOS 13」「Windows 10」等においても追従したダークモードは、高い視認性や省電力性等の機能性から、一つのアピアランスの枠を超えて多様な広がりを見せており、Webブラウザにおいても、デスクトップ版では「Google Chrome 76」「Mozilla Firefox 67」「Safari 12.1」、モバイル版では「Android webview 76」「Google Chrome 76」「Mozilla Firefox 67」「Safari for iOS 13」(各々、それ以降の版)において、CSSのメディアクエリ「prefers-color-scheme」に対応しています(最初の実装は、米国時間2018年11月7日付にてリリースされた「Safari Technology Preview 69」)。

最新のmacOS、iOS、Windows、Android等、ダークモードを有するシステムは、現状のアピアランスをアプリケーションに通知する仕組みを有しており、これをWebブラウザが検知した時に、CSSに「prefers-color-scheme」が記述されている場合には、コンテンツがCSSに応じた表示に 非同期で(再読み込みなしに)切り替わる事となります。

CSSにおいては、最初に「prefers-color-scheme」にてテーマ(no-preference or light or dark)を指定した後に、ID、クラスに対して任意の色を指定していく事となりますが、各ID、クラスに対して毎回テーマを指定するのではなく、対応するセットを纏めて記述する方が、コードの効率性に優れていると言えるでしょう。

テキストと背景を反転させる場合の記述例

ホストシステムがライトモードに設定されている場合には背景をホワイト(#fff)、テキストをブラック(#000)に指定し、ダークモードに設定されている場合にはネガのように反転(背景をブラック、テキストをホワイト)させる場合には、CSSにおいて以下の通りに記述します。

@media (prefers-color-scheme: light) {
background-color: white;
color: black;
}

@media (prefers-color-scheme: dark) {
background-color: black;
color: white;
}

後のメンテナンス性を考慮した場合には、ライト、ダーク以外のカラーテーマが追加された場合や、ライト以外のアピアランスがデフォルテーマとして採用される可能性も想定して、ライトモードに関してはデフォルトからの差分を記述するのではなく、変更しないカラーに対しても然るべき色を指定しておくと良いでしょう。

当サイトにおける対応

macOS NTでは、サイトの一部(wrapper(ラッパー)外の背景とアクセント部)に限定して、「prefers-color-scheme」に対応しています。対応環境でで当サイトを閲覧した場合には、システムのアピアランスに合わせて、ライトモードとダークモードが切り替わります。

アクセントカラーは、ライトモードの場合には「#6495ed(コーンフラワーブルー)」、ダークモードの場合には「#333333(重みを帯びたグレー)」を採用しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA