prefers-color-scheme対応のSafari 12.1がリリースされた

prefers-color-scheme対応のSafari 12.1がmacOS 10.14.4とともにリリースされた。prefers-color-schemeはOSの外観モードに応じて切り替えのできるメディアクエリ

@media (prefers-color-scheme: dark) {
  div {
    color: #fff;
    background-color: #333;
  }
} 

@media (prefers-color-scheme: light) {
  div {
    color: #333;
    background-color: #fff;
  }
} 

このように記述するとOSのカラーモードによってCSSが切り替わるというもの。正式リリースのブラウザではSafariが初対応となる。

ダークモードは全体的にPCの画面が黒ベースのカラーになるのだが、ブラウザの中だけ白が多くOS全体のトーンと合わないのが問題であった。prefers-color-schemeを使えば解決、と言いたいところだが、Webサイトを２つのカラーテーマで作成するのはかなりの手間。普及はCSSフレームワークの対応待ちといったところだろうか。

prefers-color-schemeサンプル