css - MacOS Mojave で CSS でダークモードを使用するには?

Question

MacOS Mojave は最近、ダーク モード オプションでリリースされました。

CSS を使用して Web アプリで使用する方法はありますか?

Answer 1

prefers-color-schemeメディアクエリを使用:

/* Text and background color for light mode */
body {
  color: #333;
}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    background-color: #222;
  }
}

クエリは、 、、およびのprefers-color-scheme3 つの値をサポートします。darklightno-preference

ポリフィルは必要ありません。ブラウザがサポートしていない場合、メディア クエリ コードはスキップされます。

注: Safari 12.1および Safari Tech Preview 68 でサポートされています。Mojave に同梱されている Safari 12 は、メディア クエリをサポートしていません。

2018 年 10 月現在、iOS、Chrome、Firefox はダーク モードをサポートしていません。