ダークモードは、 iOS 13 Chrome、Firefox、Safari、EdgeなどのWebブラウザもダークモードを採用しています。現在、ブラウザは、preferres-color-schemeと呼ばれる機能のおかげで、Webサイトに自動ダークモードを導入しています。
ウェブサイトはアプリのようにダークモードを検出できるようになりました
現在、一部のサイトではダークモードが提供されています。たとえば、ダークモードを有効にできます YouTube 、 ツイッター 、または スラック 数回クリックするだけで。それはかなりクールですが、新しいWebサイトにアクセスするたびに、このオプションを個別に有効にしたい人はいますか？
Windows 10、macOS、iOS、またはAndroidでダークモードを有効にすると、使用するすべてのアプリケーションがダークモードを有効にしたことを認識し、自動的に有効にできます。 GoogleChromeにはアクセスしやすいものすらありません ダークモードオプション 。 Chromeは、オペレーティングシステム全体の選択に基づいて自動的に調整します。
以前は、ウェブサイトでダークモードを自動的に実装する方法はありませんでした。ブラウザのインターフェースが暗くなっても、ウェブサイトは明るい背景を使用し続けます。ダークモードを手動で有効にするか、ダークモードを強制するブラウザ拡張機能を使用する必要があります。
これはWeb開発者のせいではなく、デバイスでダークモードが有効になっているかどうかを検出する方法がありませんでした。これは、Webサイトが利用できる新しいカスケードスタイルシート（CSS）機能によって変更されました。
すでにお近くのブラウザにあります
この問題への答えは 好む-配色 、ダークモードが有効になっているかどうかをWebサイトがWebブラウザに確認するために使用できるCSS機能。ダークモードを有効にするか無効にするかに応じて、Webページで異なるテーマを使用できます。
この機能は、2019年に最新のWebブラウザに最近追加されたばかりです。
- それ以来、すべてのプラットフォーム（Androidを含む）のGoogleChromeがサポートしています Chrome 76 、7月30日にリリース。
- Safari for iPhoneおよびiPadは、9月19日にiOS13の一部としてSafari13でそれを取得します。
- Mozilla Firefoxは、5月21日にリリースされたFirefox67以降サポートしています。
- Safari for Macは、4月5日にリリースされたSafari12.1以降サポートされています。
- Microsoft Edgeはそれをサポートしていませんが、新しいChromiumベースのEdgeブラウザはサポートしています。
これは、ブラウザ自体で選択するオプションではありません。オペレーティングシステムでライトモードとダークモードのどちらかを選択するだけで、ブラウザは変更に従い、Webサイトはそれに沿って進み、必要に応じてダークモードを自動的に有効にすることができます。
では、ダークモードのウェブサイトはどこにありますか？
この機能は現在公開されており、人気のあるすべてのブラウザで機能しますが、非常に新しいものです。ダークモードは、新しいiPhoneとiPadに付属しています iOS 13 。 Android側では、新しいAndroidフォンのみ Android 10 ダークモードをサポートしています。デスクトップ上のGoogleChromeでさえ、prefers-color-schemeをサポートしているのは数週間だけです。
とても新しいです。ダークモードを自動的に有効にするためにpreferres-color-schemeを使用する多くのWebサイトにはまだ遭遇しないでしょう。
それは将来変わることを願っています。 Webサイトは、ダークモードの設定を尊重し、自動的に従うことができるようになりました。 Web開発者には、利用できる新しいオプションがあります。
ダークモードが大好き 。最新のすべてのオペレーティングシステムでオプションになっているので、ウェブ全体に広がるのを楽しみにしています。
関連： ダークモードはあなたにとって良いことではありませんが、とにかくそれを愛しています
