macOS Mojaveがダークモードになったことに関連してウェブ画面もダークにしないとどうもバランスが悪いということで設定してみました。Firefoxはダークモードもしくはナイトモードのアドオンがあるのですが、できれば使いたくないのでcss/javascriptを追加できるアドオンあるのでインストールしました。

• Custom Style Script (Inject desired CSS or JS)

このアドオンをインストールしてCSSかJavascriptに追加します。

CSS:

html, img, video{
  -webkit-filter: invert(1) hue-rotate(180deg);
  filter: invert(1) hue-rotate(180deg);
}
body {
  background: black;
}

Javascript:

javascript:!function(d){d.head.appendChild(d.createElement('style')).innerText='html,img,video{-webkit-filter:invert(1)hue-rotate(180deg);filter:invert(1)hue-rotate(180deg)}body{background:#000}'}(document);

URLの欄は”*”にします。

だいたいOKですがYahooの画像が一部反転するのはなぜ？

追記：

通常のサイトをナイトモードもしくはダークモードにするのは反転すればいいという単純な話ではなくデザイン的なセンスが必要のようです。上記のスクリプトだと例外的な不具合がどうしても出てきます。結局、つぎのアドオンをインストールしました。

• Dark Background and Light Text – Firefox
• Midnight Lizard – Chrome