【Dark Reader】ウェブページを強制的にダークモードにする拡張機能

2021年9月7日Chrome拡張機能,FireFoxアドオン

Dark Readerのアイコン

この記事では、ブラウザの背景をダークモードに切り替えてくれる拡張機能「Dark Reader」について書きます。

どんなウェブサイトも、強制的に背景を黒にできます。

Dark Readerのスクリーンショット

ワンクリックで、ブラウザをダークモードにするChrome拡張機能です。ダークモードに対応していないサイトを、強制的にダークにしてくれます。

具体的には、文字を白、背景を黒にしてくれます。ライトモードの時は文字が黒、背景が白です。反転させるというわけです。

Chrome拡張機能なので、Chrome、Edge、Vivaldiなどで利用できます。Firefoxアドオンも用意されているので、Firefoxでも利用できます。

インストールするだけで、すぐに利用できます。ワンクリックでオンオフできます。特定のサイトを除外するブラックリスト、ホワイトリストなども設定できます。

強制的にダークモードにするので、一部ページで文字や図形が見えにくくなるというデメリットもありますが、「白背景がまぶしい!」という方にはおすすめです。

ブラウザ本体でダークテーマにしても、ウェブページまでは黒になりません。本拡張機能とブラウザのダークテーマを併用することで、完全なダークモードでブラウジングできます。

僕は今まで、ダークモードを使ったことがありませんでした。初めて本拡張機能でダークモードにした時、びっくりしました。

白背景の時と違って、目がチカチカしません。目に優しいです。科学的根拠はないらしいですが、体感として、ライトモードの時より目に良いと思いました。

PCを長時間触るという方、ぜひ試してみてください。

合わせて読みたい

本拡張機能は、ブラウザ(Chrome、Edge、Vivaldi、Firefox)のウェブサイトのみで動作します。Windows全体、ブラウザのテーマでダークにする方法は、下記記事を参考にしてみてください。

提供元:Alexander Shutau
記事執筆時のバージョン:4.9.48(2022年4月21日)

ダウンロード方法

Chromeウェブストアからインストールできます。

「Chromeに追加」をクリックします。

Dark Reader - Chrome ウェブストア

「拡張機能を追加」をクリックします。

「Dark Reader」を追加しますか? 拡張機能を追加
Firefoxをご利用の場合

Firefoxを利用している方は、以下のリンクからインストールできます。

iOSのSafari版も用意されているようです。詳しくは、下記リンクを参考にしてみてください。

参考:Dark Reader for Safari

自動で開かれる「Help -Dark Reader」ページは、興味がなければ「×」で閉じてもOKです。

初回インストール時は、「Help -Dark Reader」ページが表示される

右上にDark Readerのアイコンアイコンが追加されたら、インストール完了です。

使い方

使い方は、簡単です。Dark ReaderのアイコンDark Readerのアイコンをクリックして、「オン」を選択します。

Dark Readerの拡張機能ボタンをクリックして、「オン」にする

ダークモードになります。

ウェブページ(Google)がダークモードになる

ダークモード以外にも、フィルターをかけて見た目を変更できます。以下の4つのフィルターをかけられます。

  • 輝度(きど)
  • コントラスト
  • セピア
  • グレースケール

コントラストをあげることで、さらに真っ暗にできます。その他の項目は、変えても見にくくなるだけだったので、調整するとしたらコントラストかなと思いました。

コントラストでフィルター調整

以下、いくつかダークモードにしたサイトのスクリーンショットを貼っておきます。当サイトだとこんな感じです。

ダークモード ナポリタン寿司のPC日記
ナポリタン寿司のPC日記 | パソコン初心者です。パソコンの便利なフリーソフトやWEBサービスについて書いてます。

Yahoo!です。

ダークモード Yahoo!JAPAN
Yahoo! JAPAN

Vivaldiブログです。

ダークモード Vivaldiブログ
Vivaldiのブラウザ専門ブログ – 最新ニュース、情報提供や Vivaldiの便利な使い方

僕のYouTubeチャンネルです。

ダークモード YouTubeチャンネル ナポリタン寿司
ナポリタン寿司 YouTube

Amazonです。

ダークモード Amazon.co.jp :りんご
Amazon.co.jp :りんご

【応用】ブラック・ホワイトリストの設定

「基本はダークモードで、特定のサイトだけ通常のテーマを利用する。」といったブラック・ホワイトリストを設定できます。ホワイトリストとブラックリストの違いを書いておきます。

ホワイトリスト特定のサイトでダークテーマを許可する
ブラックリスト特定のサイトでダークテーマを禁止する

一部サイトで見えにくくなった場合に活用してみましょう。例えば、当サイトを本拡張機能でダークモードにすると、図形の色が反転してしまい、見えにくくなる場合があります。

ライトモードとダークモードの比較画像 場合によっては色が反転して見えにくくなる
強制的にダークモードにすると図形が反転して見えにくい

リストに登録する方法は2種類あります。

  • 現在開いているサイトのドメインを登録
  • 直接URLを入力して登録

現在開いているサイトを登録

ダークモードにしたくないサイトを開きます。Dark Readerのアイコン拡張機能ボタンをクリックすると、現在開いているサイトのドメイン名が表示されているので、クリックします。

「www.deepl.com」のドメイン名をクリック

サイトリストのブラックリストに登録されます。下記画像の場合は、「DeepL翻訳」で、ダークモードにしないということです。

DeepL翻訳がブラックリストに登録される

URLを直接入力して登録

当サイトをブラックリストに登録してみます。ブラックリストに登録したいサイトのURL(アドレス)をコピーします。

ブラックリストに登録したいURLをコピー

拡張機能ボタンをクリックして、サイトリストをクリックします。

拡張機能ボタンをクリック サイトリストをクリック

「ブラックリスト」を選択して、先ほどコピーしたURLを貼り付けて、Enterを押します。

ブラックリスト URLを貼り付ける

当サイトで、ダークモードがオフになります。登録するサイトは、ドメイン単位で管理されています。

当サイトの「https://www.naporitansushi.com」を登録した場合は、そのドメインにあるURL(記事)すべてが適用されます。例えば、「https://www.naporitansushi.com/diary/」とか「https://www.naporitansushi.com/vivaldi/」などの記事にも反映されます。

特定のドメインではなく、特定のページ(記事)のみ適用したい場合は、そのページのファイル名(パーマリンク)を含むすべてのURLを登録しましょう。

https://www.naporitansushi.comをブラックリストに登録した場合https://www.naporitansushi.com/diary/もダークモードから除外される
https://www.naporitansushi.com/diary/をブラックリストに登録した場合https://www.naporitansushi.comはダークモードになる

感想

以上、どんなサイトでも強制的にダークモードにするChrome拡張機能「Dark Reader」についてでした。

背景を黒にするだけで、目のチカチカが減ります。簡単にオンオフ切り替えできるので、ダークモードが好きな方だけでなく、今まで通常モードを利用していた方にもおすすめです。

Posted by ナポリタン寿司