ライトモード/ダークモード

macOS Mojave の「システム環境設定 > 一般」の「外観モード」から、ライトモード/ダークモードを選択できます。次期バージョン Safari 12.1 から、このライトモード/ダークモードの設定に連動して、Webサイトの色を変更することができます。

Safari 12.1 から prefers-color-scheme というメディアクエリが使えるので、これでライトモード/ダークモードそれぞれのCSSを振り分けて書いていきます。

prefers-color-scheme

@media (prefers-color-scheme: light) {
}
@media (prefers-color-scheme: dark) {
}

実際の書き方としては、このようになります。

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

セマンティックに作られたWebサイトほど、ダークモードに対応させやすいと思います。画像のテキストやボタン、透明部分のないpng、白背景ありきのWebデザインだと、そこそこの調整が必要になりそうですよね。

ライトモード/ダークモードの切り替えイメージ。

Safari Technology Preview

最新バージョンの12.0.1ではまだ prefers-color-scheme に対応していないので、次期バージョンの Safari Technology Preview をインストールします。現行版 Safari と共存できる上に、ブックマークなども同期します。
Safari Technology Preview

prefers-color-scheme の情報はこちら。
Media Queries Level 5|W3C

最後までお読みいただきありがとうございます!よろしければフォローお願いします!

もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

他にも、Amazonのほしい物リストからお選びいただくこともできます。

こちらの関連記事もあわせてどうぞ!