☰

ブラウザで OS がダークモードになっているかどうかを検出するにはどうすればいいですか? 質問する

tag-icon • tag-icon css macos safari media-queries darkmode
ブラウザで OS がダークモードになっているかどうかを検出するにはどうすればいいですか? 質問する

に似ている "OS X がダークモードになっているかどうかを検出するにはどうすればよいですか?「ブラウザのみ」です。

Safari/Chrome/Firefox でユーザーのシステムが新しい OS X ダーク モードになっているかどうかを検出する方法を見つけた人はいますか?

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

ベストアンサー1

新しい規格は、W3C メディアクエリ レベル 5。

注: 現在、 Safari テクノロジープレビューリリース 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 テクノロジープレビュー リリース 71Safariでテストを簡単にするためのトグルスイッチが発表されました。私もテストページブラウザの動作を確認します。

Safari Technology Preview Release 71 がインストールされている場合は、次の方法でアクティベートできます。

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

次に、テストページ要素インスペクターを開くと、ダーク/ライト モードを切り替えるための新しいアイコンが表示されます。

ダーク/ライトモードを切り替える

編集（2019年2月11日）：Appleは新しいサファリ12.1ダークモード

編集(2019 年 9 月 5 日): 現在、世界の 25% がダーク モード CSS を使用できます。出典:ホームページ

今後リリース予定のブラウザ:

  • iOS 13 (AppleのKeynoteの後の来週に出荷されると思います)
  • EdgeHTML 76 (いつ出荷されるかは不明)

編集(2019 年 11 月 5 日): 現在、世界の 74% がダーク モード CSS を使用できます。出典:ホームページ

編集(2020 年 2 月 3 日): Microsoft Edge 79 はダーク モードをサポートします。 (2020 年 1 月 15 日にリリース)

私の提案は、ほとんどのユーザーがダーク モードを使用できるようになったため (サイトを夜間に利用するユーザー向け)、ダーク モードの実装を検討する必要があるということです。

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

編集（2020年11月19日）：現在、世界の88％がダークモードCSSを使用できます。出典：ホームページ

CSSフレームワークテイルウィンド CSS v2.0ダークモードに対応しました。（2020年11月18日リリース）

編集（2020年12月2日）：

Google Chrome が開発ツールにダークテーマのエミュレーションを追加しました。出典:開発者向け

編集（2022年5月2日）:

現在、世界の 90% がダーク モード CSS を使用できます。出典:ホームページ

編集（2024年1月23日）:

現在、世界の 96.5% がダーク モード CSS を使用できます。出典:ホームページ

おすすめ記事