ブラウザではなくOSの方の設定

Firefox 67 から prefers-color-scheme media feature とやらに対応したらしいけれど、有効にならんぞ?と思ったら設定場所が違ったわ。アドオンの方じゃなくて、Windowsの方の設定を見てる。

 個人用設定 → 色 → 既定のアプリ モードを選択します → 黒

f:id:nextugi:20190609030038p:plain

以下はテストに使用したCSSコード。変数を使うと便利かもなって思った。

/* ダークモードの色設定 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111
    --fg: #EEE;
    --msg: "暗い"
  }
}

/* ライトモードの色設定 */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #EEE;
    --fg: #111;
    --msg: "明るい";
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
}
body::before {
  content: var(--msg);
}