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

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

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

【注意点】

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

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

おすすめ

Dark Reader

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

今、最もおすすめできる拡張機能。

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

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

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

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

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

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

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

Dark mode / night reader

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

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

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

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

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

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

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

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

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

Super Dark Mode

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

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

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

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

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

おすすめ以外

Change Colors

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

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

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

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

白い背景をグレーにする

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

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

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

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

番外編

Stylus

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

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

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

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

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

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

注意点

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

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

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

デザインを変更するタイプの拡張機能は、そのほとんどがけっして重くはないので、複数インストールしても問題は出ない。

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