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」）。
Table of Contents
Webブラウザのコンテンツ部分を、ホストOSのテーマと同期させて制御する、CSSのメディア特性
最新の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（重みを帯びたグレー）」を採用しています。