つれづれなる備忘録

日々の発見をあるがままに綴る

Webページのダークモード化

  以前に本ブログをダークモード対応したことを記事にしたが、多くのページはダークモード対応になっていない。(Googleの検索結果でさえ)

atatat.hatenablog.com

Chrome拡張機能でDark Readerを使うと、

基本的には色調を反転させることで白地にフォント色が黒であれば背景を黒にして、フォントを白で表示する。(Dark readerのオンオフ設定で変更できるので、Windows等のOS側の設定は不要)

解説・感想もすでにあるが、いくつかのサイトで試してみた。

qiita.com

kumitatepazuru.hatenablog.com

以下にDark ReaderのDark表示で閲覧したときの状態を示す。

"Google検索をDark表示"
Google検索表示

Googleの検索画面の配色がちゃんと反転していることがわかる。

次に本ブログのページを表示すると

"本ブログをDark表示"
本ブログをDark表示

ブログ本文表示

フォント以外にタグ要素で設定したスタイルの配色も反転しているが画像に関しては反転していない。また画像以外も単純にすべての色調を反転しているわけではなくはてなのコードの部分やグローバルメニューの色は変化していないように見える。他にいくつか黒基調のサイトでDark表示にしてみたがあまり変化しない。

本ブログはダークモード対応の表示を行っているので、OS側でダークモードの設定を行っていると(Dark readerはオフ)以下のように表示される。

本ブログのダークモード対応表示

CSSでも一律反転は設定できてDark Readerと同じように表示することはできるが、左右の埋め込み背景画像が反転が気に入らないのでここの対策は思案中。

Dark ReaderはWebページだけでなくChromeで表示されるpdfファイルも色調を反転させて表示させることができる。

Chromeのpdf表示

ただし、画像も一律で反転して表示する。

かなり人気のある拡張機能であるがゆえに偽物も出回ることがあるので、拡張機能をインストールする際は注意が必要だ。

人気の拡張機能「Dark Reader」の悪意あるコピーが蔓延 - ソフトアンテナブログ