macOS Mojave以降/iOS 13以降/iPadOS 13以降のSafariに対応しています。(2019-09-20 追記)

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

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

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