ブラウザでOSがダークモードかどうかを検出するにはどうすればよいですか？

「OS Xがダークモードかどうかを検出する方法」に似ていますが、ブラウザのみです。

ユーザーのシステムがSafari / Chrome / Firefoxの新しいOS Xダークモードかどうかを検出する方法があるかどうか誰かが見つけましたか？

現在の操作モードに基づいて、サイトのデザインをダークモードフレンドリーに変更したいと考えています。

新しい標準は、Media Queries Level 5のW3Cに登録されています。

注：現在、Safari Technology Previewリリース68でのみ利用可能です

ユーザー設定がlight次の場合：

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

ユーザー設定がdark次の場合：

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

no-preferenceユーザーが好みがない場合のオプションもあります。ただし、その場合は通常のCSSを使用して、CSSを正しくカスケードすることをお勧めします。

編集（2018年12月7日）：

ではSafariのテクノロジープレビューリリース71彼らは簡単にテストを行うためにSafariでトグルスイッチを発表しました。また、ブラウザの動作を確認するためのテストページを作成しました。

あなたが持っている場合はSafariのテクノロジープレビューリリース71はあなたを介して活性化させることができますインストール：

開発>実験的機能>ダークモードCSSサポート

次に、テストページを開いて要素インスペクターを開くと、暗い/明るいモードを切り替える新しいアイコンがあります。

-

編集（2019年2月11日）：Appleは新しいSafari 12.1ダークモードで出荷

-

編集（2019年9月5日）：現在、世界の25％がダークモードCSSを使用できます。出典：caniuse.com

今後のブラウザ：

• iOS 13（Appleの基調講演の翌週に出荷されると思います）
• EdgeHTML 76（いつ出荷されるかわからない）

-

編集（2019年11月5日）：現在、世界の74％がダークモードCSSを使用できます。出典：caniuse.com

-

編集（2020年2月3日）：Microsoft Edge 79はダークモードをサポートしています。（2020年1月15日にリリース）

-

私の提案は次のとおりです：ほとんどのユーザーは（特にモバイル、つまりバッテリー節約のために）ダークモードを使用できるため、ダークモードの実装を検討する必要があります。

注： IE、Edgeを除いて、すべての主要ブラウザが現在ダークモードをサポートしています。

JSから検出したい場合は、次のコードを使用できます。

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

変更を監視するには：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

これは現在（2018年9月）「CSSワーキンググループエディタードラフト」で議論されています。メディアクエリとして利用可能なSpecが起動しました（上記を参照）。Safariにはすでに何かが上陸しています。こちらもご覧ください。理論的には、Safari / Webkitでこれを行うことができます。

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

しかし、これは私的なもののようです。MDNでは、CSSメディア機能inverted-colorsについて言及されています。プラグイン：ダークモードについてブログで説明しました。

Mozilla APIを検索しましたが、ブラウザウィンドウの色に対応する変数がありません。私はあなたに役立つかもしれないページを見つけましたが：CSSでオペレーティングシステムのスタイルを使用する方法。記事のヘッダーにもかかわらず、ChromeとFirefoxでは色が異なります。

Mozillaによると、2019年9月現在、こちらが推奨される方法です

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}