macOS Mojave 10.14.4のSafariがカスタムカラー設定に対応しているWebサイトでダークモードに対応したらしいので試してみた

Webサイトがカスタムカラー設定に対応していたら、macOS Mojave 10.14.4のSafariでそれが反映されるようになったそうです。

macOS Mojave 10.14.4が公開、Safariがダークモードに対応 - iPhone Mania
https://iphone-mania.jp/news-243495/

> カスタムカラー設定に対応しているWebサイトでダークモードに対応

じゃあWebサイトでカスタムカラー設定するにはどうすればよいのか？調べてみました。
<img width="600" alt="スクリーンショット 2019-03-28 11.10.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/f1a2c013-50dc-9c9b-e3c2-da9b4e8f3430.png">


## `prefers-color-scheme`ってメディアクエリを利用する

こちらの記事を参考にさせていただきました。

macOS MojaveのSafariで表示したWebサイトを、ダークモードに対応させる方法 | TokyoHeadTerminal
https://www.head-t.com/2018/11/2018-11-03.html

`prefers-color-scheme` というメディアクエリを利用すれば良いとのこと。仕様についてはこちらが詳しいです。

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

ブラウザの対応をみると現時点(2019/03/28)でデスクトップ用でFirefox 67とSafari 12.1、スマホ用はAndroid版 Firefox 67が対応していました。Firefox 67はまだベータです。

Google Chromeに関しては絶賛開発中みたいです。

Media Queries: prefers-color-scheme feature - Chrome Platform Status
https://www.chromestatus.com/feature/5109758977638400

889087 - Add support for CSS prefers-color-scheme media feature - chromium - Monorail
https://bugs.chromium.org/p/chromium/issues/detail?id=889087

確認するのに用意したHTMLとCSSは以下となります。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ダークモード対応</title>
    <style type="text/css">
      .main {
        font-size: 30pt;
        width: 100%;
        text-align: center;
      }
      @media (prefers-color-scheme: light) {
        body {
          color: #000;
          background-color: #fff;
        }
        .main:after {
          content: "ライトモード";
        }
      }
      @media (prefers-color-scheme: dark) {
        body {
          color: #fff;
          background-color: #000;
        }
        .main:after {
          content: "ダークモード";
        }
      }
    </style>
  </head>
  <body>
    <div class="main">prefers-color-scheme:</div>
  </body>
</html>
```

## 確認してみる

### macOS Mojave 10.14.3

手元のMacBook ProがまだmacOS Mojave 10.14.3だったので、対応していないことを確認しました。

#### ブラウザバージョン

- Google Chrome: 73.0.3683.86
- Safari: 12.0.3(14606.4.5)
- Firefox: 66.0.2

設定 -> 一般 -> 外観モードでライト・ダーク切り替えても変わりなし。
<img width="350" alt="スクリーンショット 2019-03-28 10.29.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/079d46a8-3fad-b616-47fe-f7d26f0d641f.png"> <img width="350" alt="スクリーンショット 2019-03-28 10.26.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/60368f5a-398b-b4d8-0de4-4db5039de68c.png">


### macOS Mojave 10.14.4

設定 -> ソフトウェアアップデートでmacOS Mojave 10.14.4にアップデートしてから確認しました。
<img width="400" alt="スクリーンショット 2019-03-28 10.32.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/701b43d4-ceaa-dfa7-10a4-2a8643a9ae16.png">

#### ブラウザバージョン

- Google Chrome: 73.0.3683.86
- Safari: 12.1(14607.1.40.1.4)
- Firefox: 66.0.2

Safari 12.1でメディアクエリ`prefers-color-scheme` が機能していることが確認できました。
<img width="350" alt="スクリーンショット 2019-03-28 11.11.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/0a1e2255-d133-ba4a-ce29-93034bb55d55.png"> <img width="350" alt="スクリーンショット 2019-03-28 11.10.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/f1a2c013-50dc-9c9b-e3c2-da9b4e8f3430.png">


## Webサイトが対応していなかったら？

Webサイトがメディアクエリ`prefers-color-scheme` に対応していないけれど、ダークモードにした！という場合には、Dark Readerという拡張機能を利用しましょう。おすすめ。


Dark Readerを利用してWebサイトをとことんダークモードにする - Qiita
https://qiita.com/kai_kou/items/8b33e599668926d80e7e


## 参考

macOS Mojave 10.14.4が公開、Safariがダークモードに対応 - iPhone Mania
https://iphone-mania.jp/news-243495/

macOS MojaveのSafariで表示したWebサイトを、ダークモードに対応させる方法 | TokyoHeadTerminal
https://www.head-t.com/2018/11/2018-11-03.html

prefers-color-scheme - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

Media Queries: prefers-color-scheme feature - Chrome Platform Status
https://www.chromestatus.com/feature/5109758977638400

889087 - Add support for CSS prefers-color-scheme media feature - chromium - Monorail
https://bugs.chromium.org/p/chromium/issues/detail?id=889087

Dark Readerを利用してWebサイトをとことんダークモードにする - Qiita
https://qiita.com/kai_kou/items/8b33e599668926d80e7e