ブラウザではなくOSの方の設定
Firefox 67 から prefers-color-scheme media feature とやらに対応したらしいけれど、有効にならんぞ?と思ったら設定場所が違ったわ。アドオンの方じゃなくて、Windowsの方の設定を見てる。
個人用設定 → 色 → 既定のアプリ モードを選択します → 黒
以下はテストに使用した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); }