[Chrome] 背景を強制的に暗く/黒くするおすすめ拡張機能:ダークモード対応【まとめ】

2021 年 6 月 8 日

ここでは、Webページの背景を黒系統にして暗くすることで、YouTubeのダークモードのように目にやさしい状態にするためのGoogle Chrome用拡張機能を紹介。

夜間のWeb閲覧や、ブルーライト対策におすすめ。

なお、似たような名前の拡張機能が多いので十分に注意してほしい。

* 大半がスマートフォン向けのブラウザアプリでも一応は動くが、部分的に動作がおかしくなることも(Kiwi Browserなど)。

* スマホのKiwi Browserにはデフォルトでダークモードの「ナイトモード」がすでにある。

【注意点】

あくまで「Webページ」を暗くする拡張機能について紹介。

Google Chromeそのものを黒背景にしたい場合は、設定を変更する、該当テーマをChrome ウェブストアでインストールする、WindowsなどOS自体の設定を変更するなどの方法がある必要がある。

おすすめ

Dark Reader

色の変更方法:スタイルシート(CSS)の強制変更
日本語対応:あり

ほとんどのサイトで正常に動作し、しかも設定がシンプルでわかりやすい。

GmailやSimplenoteのような、動的にサイト表示が変更されるWebサービスでもきちんと動作する場合が多い。

また、全体に対してはもちろん、サイトごとにも明るさやコントラストを細かく設定できるので、自分好みの表示にすることができる。

配色をセピア調やグレースケールにすることも可能。

オープンソースで開発されているので、著作権の面でもセキュリティの面でも安心できる。

積極的に開発が進められているのも好印象。

ただ、人気のある拡張機能だけに偽物が多く、セキュリティ面でのリスクがあるため、本物であるかよく確認してインストールするようにしよう。

【問題点】

HTML/CSSの構造を詳細に分析してから色を適用するためか、やや重い。

また、機能を一時的にオフにしてもなぜかいったん背景を黒くしてから白に戻すという無駄な処理が入ることがよくある(Chrome側でこの拡張機能を完全に無効化した場合は別)。

スマホアプリのKiwi Browserでは、表示がおかしくなることがままある。特にYouTubeなどの動画サイトで顕著で、場合によってはページ全体が真っ黒になってしまい、動画どころか何も見えなくなってしまうこともある。

Dark Mode

色の変更方法:スタイルシート(CSS)の強制変更
日本語対応:なし
色の指定:あり
明るさ(輝度)の変更:なし
コントラストの変更:なし

シンプルな拡張機能。

動作が軽く、必要十分といった印象。

全体的に、ポップアップの背景が一律で透明になってしまうという問題が出ることもある。

サイトの除外指定は、いちいち対応サイトのドメイン(サブドメイン含む)のテキストを自分で入力しなければならないのが面倒。

Lunar Reader – Dark Theme & Night Shift Mode

色の変更方法:?
日本語対応:なし
色の指定:なし
明るさ(輝度)の変更:あり
コントラストの変更:あり

背景色とフォントを単純に反転させる。

そのため、ページの元々暗い部分は逆に明るくなってしまう大きなデメリットもあるが、画像はちゃんと反転されないようになっている(下記Dark mode / night readerと違う点)。
 
ページごとのオン/オフを簡単に切り替えられる。

Googleマップのように表示が特殊なサイトでは見た目がおかしくなることも。

Dark mode / night reader

色の変更方法:グラフィック(レンダリング結果)の強制変換

これは、ここで紹介している他の拡張機能とは毛色が異なり、HTML向けのスタイルシート(CSS)を変更するのではなく、画面表示そのものを強制的に反転させる=ネガポジ反転させるもの。

反転させるのではなく、全体の明るさを落とすことも可能。

こういった仕組みのため、基本的にデザインを変更できないサイトはない

副作用として、ときおり画像まで反転させ、まさに写真フィルムのネガのようにしてしまうこともあるが、ほとんどの場合、画像も正常に表示されるのであまり大きな問題にはならないだろう。

(どうも、HTML要素の背景にCSSで画像が指定されている場合に反転されるらしい)

Dark Readerなど、他の拡張機能と組み合わせて使うと最強。通常の方法ではうまく変更できない場合に補助的に使うのに合っている。

設定では「inverted colors」が色の反転、「reduce contrasts」がコントラストの低下≒明るさを抑える機能のこと。

日本語に対応していないのが残念だが、設定は単純なのでほとんど問題はないだろう。

おすすめ以外

Change Colors

色の変更方法:スタイルシート(CSS)の強制変更

HTMLのすべてのdiv要素などを強制的に黒くし、反対にすべてのテキストを白くするだけのシンプルな拡張機能。

その仕組み上、大半のサイトで適用可能だが、本来表示すべきものまで真っ黒にしてしまい、見えなくしてしまう欠点もある。

正直、使いづらく、また2018年で更新が止まってしまっているので、あまりおすすめできない。

白い背景をグレーにする

色の変更方法:スタイルシート(CSS)の強制変更

その名の通り、背景が白の場合にグレーに変更する、それだけの拡張機能。

最も軽いが、まったくカスタマイズできず、今となっては使い勝手が悪い。

また、2014年で更新が止まってしまった古い拡張機能なので、今からあえて導入する利用はないだろう。

ダークモード – ナイトアイ

色の変更方法:スタイルシート(CSS)の強制変更

必要な機能がほとんど含まれ、安定して動作する拡張機能ではあるのだが、無料版は制限が多く使いづらい面も。

たとえば、適用除外サイトのリストは5つまでしか設定できない。

Super Dark Mode

色の変更方法:スタイルシート(CSS)の強制変更

【要注意!】
2025年2月現在、「マルウェアが含まれている」としてChrome Web Storeからは削除され、すでにインストール済みのものも強制的に無効化されている。Firefox版はそのまま。いずれも詳細は不明。

Dark Readerと同じタイプの拡張機能。

これも安定して動作するが、Dark Readerと比べて、うまく表示されないサイトがやや多い印象。

ただし、すべてのサイトに適用するCSSを自分で指定でき、有名サイト用の専用デザインが用意されているのがメリット。

また、古いバージョンのChromeでも問題なく動作するので、なんらかの理由で昔の環境を使わなければならない場合に役に立つだろう。

番外編

Stylus

色の変更方法:スタイルシート(CSS)の強制変更

こちらは、背景を黒くするというより、特定サイト(ドメイン)のページデザインを好きなように変更するための拡張機能。

そのため、サイトごとにいちいちスタイルシート(CSS)と呼ばれる形式でデザインを指定しなければならないが、有名サイトならば「Userstyles.org」というサイトで他のユーザーが公開してくれている既存のデザインを利用できるため、意外と使える場面が多い。

最も面倒だが、実は最も細かく表示をカスタマイズできるのがこれ。

上記の自動化してくれる拡張機能では物足りない場合に、特定サイトでのみ使ってみよう。

似たような拡張機能に「Stylish」というものがあり、上記Userstyles.orgの運営元でもあるが、以前、勝手にユーザーの閲覧履歴を収集し、そのデータを他企業に売却するという問題行為を行っていたので、オープンソースで有志がプライバシーに配慮してつくったこのStylusのほうを使うようにしよう。

注意点

サイトによっては、上記の拡張機能などを適用してもうまく表示されないことがある。

理由はいろいろ考えられるが、最も多い原因はサイトデザインそのものをJavaScriptというスクリプト(プログラム)によって変更しているためで、ユーザー側ではどうしようもないことがある。

こういった場合におすすめなのが、複数の拡張機能を目的や状況に応じて使い分けること。

デザインを変更するタイプの拡張機能は複数インストールすると問題が出てしまう場合もあるが、実際に試して確認するほかない。

個人的には、「Dark Reader」+「Dark mode」が一番使い勝手がいい。おすすめ。