iOS 13やAndroid 10など、今やユビキタスになっているダークモード。Chrome、Firefox、Safari、Edgeなどのブラウザでもダークモードが採用されています。現在では、prefers color schemeと呼ばれる機能により、ブラウザはウェブサイトに自動的にダークモードを導入しています。

ウェブサイトがアプリのように暗証番号を検出できるようになりました

一部のWebサイトでは、ダークモードを提供するようになりました。例えば、YouTube、Twitter、Slackのダークモードを数回のクリックで有効にすることができます。これはクールですが、新しいサイトにアクセスするたびに、このオプションを個別に有効にしたいと思う人はいないでしょう。

Windows 10、macOS、iOS、Androidでダークモードを有効にすると、使用しているアプリは、あなたがダークモードを有効にしていることを知り、自動的に有効にすることができます。GoogleChromeには、簡単にアクセスできるダークモードのオプションさえありません。

従来は、どのウェブサイトもダークモードを自動的に実装することはできませんでした。ブラウザのインターフェイスを暗くしていても、ウェブサイトは明るい背景で表示され続けます。手動でダークモードを有効にするか、強制的にダークモードにするブラウザの拡張機能を使用する必要がありました。

あなたの端末でダークモードが有効になっているかどうかを検知できないのは、ウェブ開発者の責任ではありません。これは、新しいCSS（Cascading Style Sheets）機能によって変化し、ウェブサイトはこれを活用することができるようになりました。

すでにあなたの近くのブラウザに搭載されています

この質問に対する答えは、優先配色です。これは、Webサイトがダークモードが有効かどうかをWebブラウザに問い合わせるために使用できるCSS機能です。ページは、ダークモードを有効にしているか無効にしているかによって、異なるテーマを使用することができます。

この機能は、2019年に最新のウェブブラウザに追加されたばかりです。

• 7月30日のChrome 76のリリース以降、すべてのプラットフォーム（Androidを含む）のGoogle Chromeでサポートされるようになりました。
• 9月19日、iPhoneとiPadのios13にsafari13が追加されました。
• Mozilla Firefoxは、5月21日にリリースされたFirefox 67から対応しています。
• SafariforMacでは、4月5日にリリースされたSafari 12.1より対応しています。
• Microsoft Edgeは対応していませんが、Chromiumベースの新しいEdgeブラウザは対応する予定です。

これは、ブラウザ自体で選択するオプションではありません。OSでライトモードとダークモードを選択するだけで、ブラウザがこの変更に従い、ウェブサイトもそれに倣って、希望すれば自動的にダークモードを有効にすることができるのです。

では、ダークモードのウェブサイトはどこにあるのでしょうか？

この機能は現在、すべての一般的なブラウザで利用可能ですが、非常に新しいものです。iPhoneやiPadは、新しいios13でダークモードを採用しています。Android側では、新しいAndroid 10**を搭載したAndroidsのみがダークモードに対応しています。デスクトップのgooglechromeでさえ、数週間前からprefersの配色をサポートしているに過ぎません。

優先配色を使用して自動的にダークモードを有効にするサイトには、まだあまり遭遇しないかもしれません。

今後、変わっていくことを期待しています。Webサイトがダークモードの好みを尊重し、自動的にそれに従うようになりました。Web開発者は、新しいオプションを利用することができるようになりました。

私たちはダークモードが大好きで、すべての最新OSのオプションになっているので、ウェブ上で普及するのを見るのは嬉しいことです。

関連記事：ダークモードは体に良くないが、とにかく気に入っている。