【Dark Reader】ウェブページを強制的にダークモードにする拡張機能
この記事では、PCブラウザで開いたウェブサイトの背景を、強制的にダークモードに切り替えてくれるChrome拡張機能「Dark Reader（ダーク・リーダー）」について書きます。
どんなウェブサイトも、強制的に背景を黒にできます。
ワンクリックで、ブラウザで表示しているウェブサイトをダークモードにするChrome拡張機能です。
ダークモードに対応していないサイトを、強制的にダークにしてくれます。具体的には、文字を白、背景を黒にしてくれます。ライトモードの時は文字が黒、背景が白です。反転させます。
Chrome拡張機能なので、Chrome、Microsoft Edge、Vivaldiなどで利用できます。Firefoxアドオンも用意されているので、Firefoxでも利用できます。
インストールするだけで、すぐに利用できます。ワンクリックでオンオフできます。特定のサイトを除外するブラックリスト、ホワイトリストを設定できます。強制的にダークモードにするので、一部ページでは、文字や図形が見えにくくなるというデメリットもありますが、「白背景がまぶしい！」という方におすすめです。
通常、ウェブブラウザ本体のテーマをダークモードにしても、開いているウェブサイトまでは黒になりません。本拡張機能を利用することで、ウェブサイトを暗くできます。
僕は今まで、ダークモードを使ったことがありませんでした。初めて本拡張機能でダークモードにした時、びっくりしました。体感として、ライトモードの時より目に良いと思いました。
本拡張機能は、ブラウザ（Chrome、Edge、Vivaldi、Firefox）のウェブサイトのみで動作します。Windows全体、ブラウザのテーマでダークにする方法は、下記記事を参考にしてみてください。
https://www.naporitansushi.com/browser-darkmode/リリース元：Alexander Shutau
記事執筆時のバージョン：4.9.81（2024年03月30日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/dark-reader/eimadpb...Firefoxを利用している方は、以下のリンクからインストールできます。
https://addons.mozilla.org/en-US/firefox/addon/darkreader/iOSのSafari版も用意されているようです。詳しくは、下記リンクを参考にしてみてください。
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
インストールした時、もしかしたら自動で「Help -Dark Reader」ページが開かれるかもしれません。不要な場合は、タブを閉じましょう。
頻繁に本拡張機能のポップアップを開く場合、右上にある拡張機能のパズルアイコンをクリック→「Dark Reader」の右にあるピンアイコンをクリックします。オーバーフローメニューではなく、直接ツールバーに配置されます。
使い方
本拡張機能をインストールすると、自動的に全てのウェブサイトがダークモードになると思います。なっていない場合は、設定から本拡張機能をオンにします。
本拡張機能のオンオフ切り替え
適当に本拡張機能が動作するサイトを開きます。ChromeウェブストアやChromeの設定ページでは動作しないので注意です。当サイトやGoogleなど、好きなページを開きます。
サイトを開けたら、インストールした拡張機能アイコンをクリックして、「オン」を選択します。右上の「オン・オフ」が全てのウェブサイト全体の切り替えです。サイトのドメインごとではありません。
ウェブサイトが強制的にダークモードになります。当サイトは、眩しいライトモードです。ダークモードなんて用意していません。本拡張機能を使うことで、ダークモードが用意されていない当サイトでも、無理やりダークモードにしてくれます。
輝度、コントラスト、セピア、グレースケールの調整
ダークモード以外にも、フィルターをかけて見た目を変更できます。以下の4つのフィルターをかけられます。
- 輝度（きど）
- コントラスト
- セピア
- グレースケール
拡張機能ポップアップのスライダーを調整します。
動画も貼っておきます。コントラストをあげることで、より黒に近いダークモードにできます。
ドメイン上で一時的にダークモードを無効化する方法
デフォルトでは全てのサイトが自動的にダークモードになります。サイトによっては、ダークモードにすることで逆に見にくくなる場合があります。そういった場合に、そのドメイン上では本拡張機能でダークモードにしないよう設定します。
ダークモードにしたくないサイト（ドメイン）ページを開きます。拡張機能のポップアップを開いて、左上のドメイン名をクリックします。例えば、当サイトを開いている場合、ここのドメイン名は「www.naporitansushi.com」になっていると思います。
ドメイン名の左がチェックマークから「×」マークになります。この間は、拡張機能のダークモードが解除されて、通常どおりのページデザインになります。再びそのドメイン上で有効にしたい場合、同様にクリックします。
ダークテーマの検出機能の有効化
サイトによっては、元々ダークモードが実装されている場合があります。TwitterやInstagramなどです。こういったサイトで本拡張機能を使うと、ちょっと色がおかしくなったり、元のダークモードより見にくくなる場合があります。そういった問題を解決したい場合、「ダークテーマの検出」機能を有効にします。
Twitterなどの元々実装されているダークモードにしているサイトを開きます。拡張機能のポップアップをクリックして、「サイト上の切替を設定」をクリックします。ドメイン名の下に小さく書かれています。
「ダークテーマの検出」をクリックします。
そのサイトからダークモードが検出された場合、元のダークモードを優先するようになります。Twitterでダークブルーテーマにしている場合、そのままダークブルーテーマのままです。
キーボードショートカットで切り替え
キーボードショートカットで、本拡張機能の有効・無効、そのサイトの切り替えを割り当てられます。
Chromeブラウザで「chrome://extensions/shortcuts」にアクセスするか、「Dark Reader」拡張機能のポップアップを開いて、「サイト上の切替を設定」→「クリックでショートカットを設定」をクリックします。
Chrome拡張機能のショートカットキーページが表示されます。「Dark Reader」拡張機能を探します。拡張機能を有効にする、現在のサイトの切替など、いくつかの項目が用意されています。
キーを設定したい項目の鉛筆マークをクリックします。左側のボックスにカーソルを当てて、割り当てたいショートカットキーを押します。
試しに「現在のサイトの切替」に、Alt+Dを割り当ててみました。
サイト上でキーを押すと、素早くダークモードの有効・無効を切り替えられます。
ダークモードにしたサイトのサンプル画像
以下、いくつかダークモードにしたサイトのスクリーンショットを貼っておきます。当サイトです。
「Yahoo! JAPAN」です。
Vivaldiブログです。「Vivaldi（ヴィヴァルディ）」は、僕が愛用しているウェブブラウザアプリです。
「Amazon
」です。
僕のYouTubeチャンネルです。
ブラック・ホワイトリストの設定
「基本はダークモードで、特定のサイトだけ通常のテーマを利用する。」といったブラック・ホワイトリストを設定できます。ホワイトリストとブラックリストの違いを書いておきます。
| ホワイトリスト | 特定のサイトでダークテーマを許可する |
| ブラックリスト | 特定のサイトでダークテーマを禁止する |
一部サイトで見えにくくなった場合に役立ちます。例えば、当サイトを本拡張機能でダークモードにすると、図形の色が反転してしまい、見えにくくなる場合があります。
当サイトをブラックリストに登録してみます。ブラックリストに登録したいサイトのURL（アドレス）をコピーします。
拡張機能ボタンをクリックして、サイトリストをクリックします。
「ブラックリスト」を選択して、先ほどコピーしたURLを貼り付けて、Enterを押します。
当サイトで、ダークモードがオフになります。登録するサイトは、ドメイン単位で管理されています。
当サイトの「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（ダークリーダー）」についてでした。
背景を黒にするだけで、目のチカチカが減ります。簡単にオンオフを切り替えられるので、ダークモードが好きな方だけでなく、今まで通常モードを利用していた方にもおすすめです。