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
追記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コードが読み取れないという問題があります。やはりボタン等で切り替える仕組みが必要です。
参考: