web-dev-qa-db-ja.com

OSがブラウザでダークモードになっているかどうかを検出する方法は？

「 OS Xがダークモードであるかどうかを検出する方法？ 」と同様、ブラウザのみ。

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

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

cssmacossafari
53
funkju

新しい標準は、 W3Cのメディアクエリレベル5 に登録されています。

注：現在 Safariテクノロジープレビューリリース68 でのみ利用可能

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

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

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

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

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

編集（2018年12月7日）：

Safari Technology Preview Release 71 では、テストを簡単にするためにSafariのトグルスイッチを発表しました。ブラウザの動作を確認するために、 テストページ も作成しました。

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

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

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

toggle dark/light mode

-

EDIT（2019年2月11日）：Appleは新しい Safari 12.1 darkで出荷されますモード

-

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

今後のブラウザ：

  • iOS 13（Appleの基調講演の後、来週出荷されると思います）
  • EdgeHTML 76（いつ出荷されるかわかりません）
61
Davy de Vries

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

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

しかし、これは private のようです。 MDNでは、CSSメディア機能inverted-colorsは 言及 です。プラグ：ダークモードについてブログで書いた こちら 。

22
Frank Lämmer

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

5
Victor Jacobsen

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

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