WebコンテンツのDark Modeについて

WebコンテンツのDark Modeの情報が全然ない。まぁ、まだ仕様策定中で実装してるのがmac版のsafariだけなので仕方ないのだが。

Safari以外の状況は以下のような感じ。

• https://bugs.chromium.org/p/chromium/issues/detail?id=889087
• https://bugs.chromium.org/p/chromium/issues/detail?id=939811
• https://bugzilla.mozilla.org/show_bug.cgi?id=1494034
• https://bugzilla.mozilla.org/show_bug.cgi?id=1525107

ChromeはWork In Progress。FirefoxはNightlyバージョンで一部実装済み。

supported-color-schemes / color-schemeプロパティ

利用するカラースキームの設定。darkを設定しておくとDark Mode時にはDark Mode用のデフォルトスタイルシートが適用されるようになる。

フォームのボタンやプルダウン等もDark Mode用のものに切り替わるのが地味にありがたい。

mac版safari 12.1ではsupported-color-schemesという名前で実装されているが、次のバージョンでcolor-schemeに改名される予定。Firefox Nightly (68.0) では未対応

:root {
  supported-color-schemes: light dark;
  color-scheme: light darkl;
}

当初はmeta tagとして実装される予定だったらしいが、CSSプロパティとして実装されるようだ。

https://github.com/whatwg/html/issues/4504

prefers-color-scheme メディアクエリ

今dark mode対応についてググると出てくるのは大体これに関する情報。Dark Mode時に適用されるスタイルを指定できる。

現状mac版safari 12.1とFirefox Nightly 68.0以降で動作する

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

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

メディアクエリなのでlinkタグにも設定可能