ウェブサイトをダークモードにする

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

CSS scriptによる効果

アドオンによる効果


追記2:

prefers-color-scheme: darkというCSSを策定中のようです。これがすべてもブラウザに対応すればきれいなDark Modeになりそうです


追記3:

ついでにNew Tabページが醜いのでそれもカスタマイズしてみます。Chromeだとスピードダイヤルは消せませんがつぎのオプションが可能です。

  • chrome://flags/#ntp-ui-md
  • chrome://flags/#ntp-icons
  • chrome://flags/#ntp-custom-links
  • chrome://flags/#ntp-backgrounds

Firefoxは設定でスピードダイヤルを消すことができます。


追記4:

ダークモードでQRコードが読み取れないという問題があります。やはりボタン等で切り替える仕組みが必要です。


参考: