【Dark Reader】ウェブページを強制的にダークモードにする拡張機能
![「Dark Reader」のアイコン](https://www.naporitansushi.com/wp-content/uploads/2022/02/dark-reader_01.png)
この記事では、PCブラウザで開いたウェブサイトの背景を、強制的にダークモードに切り替えてくれるChrome拡張機能「Dark Reader(ダーク・リーダー)」について書きます。
どんなウェブサイトも、強制的に背景を黒にできます。
ワンクリックで、ブラウザで表示しているウェブサイトをダークモードにするChrome拡張機能です。
ダークモードに対応していないサイトを、強制的にダークにしてくれます。具体的には、文字を白、背景を黒にしてくれます。ライトモードの時は文字が黒、背景が白です。反転させます。
Chrome拡張機能なので、Chrome、Microsoft Edge、Vivaldiなどで利用できます。Firefoxアドオンも用意されているので、Firefoxでも利用できます。
インストールするだけで、すぐに利用できます。ワンクリックでオンオフできます。特定のサイトを除外するブラックリスト、ホワイトリストを設定できます。強制的にダークモードにするので、一部ページでは、文字や図形が見えにくくなるというデメリットもありますが、「白背景がまぶしい!」という方におすすめです。
通常、ウェブブラウザ本体のテーマをダークモードにしても、開いているウェブサイトまでは黒になりません。本拡張機能を利用することで、ウェブサイトを暗くできます。
![Google Chromeで「ナポリタン寿司のPC日記」を開いた画像](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_22-1000x425.png)
僕は今まで、ダークモードを使ったことがありませんでした。初めて本拡張機能でダークモードにした時、びっくりしました。体感として、ライトモードの時より目に良いと思いました。
本拡張機能は、ブラウザ(Chrome、Edge、Vivaldi、Firefox)のウェブサイトのみで動作します。Windows全体、ブラウザのテーマでダークにする方法は、下記記事を参考にしてみてください。
リリース元:Alexander Shutau
記事執筆時のバージョン:4.9.81(2024年03月30日)
インストール方法
Chromeウェブストアからインストールできます。
Firefoxを利用している方は、以下のリンクからインストールできます。
iOSのSafari版も用意されているようです。詳しくは、下記リンクを参考にしてみてください。
「Chromeに追加」をクリックします。
![「Dark Reader」拡張機能をインストールする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_25-1000x514.png)
「拡張機能を追加」をクリックします。
![「Dark Reader」拡張機能をインストールする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_26.png)
拡張機能のオーバーフローメニューに追加されたらOKです。
![「Dark Reader」拡張機能をインストールする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_27.png)
インストールした時、もしかしたら自動で「Help -Dark Reader」ページが開かれるかもしれません。不要な場合は、タブを閉じましょう。
![「Dark Reader」拡張機能をインストールする手順画像4](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_28.png)
頻繁に本拡張機能のポップアップを開く場合、右上にある拡張機能のパズルアイコンをクリック→「Dark Reader」の右にあるピンアイコンをクリックします。オーバーフローメニューではなく、直接ツールバーに配置されます。
![「Dark Reader」拡張機能をインストールする手順画像5](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_29.png)
使い方
本拡張機能をインストールすると、自動的に全てのウェブサイトがダークモードになると思います。なっていない場合は、設定から本拡張機能をオンにします。
本拡張機能のオンオフ切り替え
適当に本拡張機能が動作するサイトを開きます。ChromeウェブストアやChromeの設定ページでは動作しないので注意です。当サイトやGoogleなど、好きなページを開きます。
サイトを開けたら、インストールした拡張機能アイコンをクリックして、「オン」を選択します。右上の「オン・オフ」が全てのウェブサイト全体の切り替えです。サイトのドメインごとではありません。
![「Dark Reader」拡張機能をオンオフする手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_31.png)
ウェブサイトが強制的にダークモードになります。当サイトは、眩しいライトモードです。ダークモードなんて用意していません。本拡張機能を使うことで、ダークモードが用意されていない当サイトでも、無理やりダークモードにしてくれます。
![「Dark Reader」拡張機能を導入する前と後の当サイト比較画像](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_32-1000x705.png)
輝度、コントラスト、セピア、グレースケールの調整
ダークモード以外にも、フィルターをかけて見た目を変更できます。以下の4つのフィルターをかけられます。
- 輝度(きど)
- コントラスト
- セピア
- グレースケール
拡張機能ポップアップのスライダーを調整します。
![「Dark Reader」拡張機能でフィルターを調整する手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/06/dark-reader_34.png)
動画も貼っておきます。コントラストをあげることで、より黒に近いダークモードにできます。
ドメイン上で一時的にダークモードを無効化する方法
デフォルトでは全てのサイトが自動的にダークモードになります。サイトによっては、ダークモードにすることで逆に見にくくなる場合があります。そういった場合に、そのドメイン上では本拡張機能でダークモードにしないよう設定します。
ダークモードにしたくないサイト(ドメイン)ページを開きます。拡張機能のポップアップを開いて、左上のドメイン名をクリックします。例えば、当サイトを開いている場合、ここのドメイン名は「www.naporitansushi.com
」になっていると思います。
![「Dark Reader」拡張機能で、一時的にサイトのダークモードを無効化する手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_47.png)
ドメイン名の左がチェックマークから「×」マークになります。この間は、拡張機能のダークモードが解除されて、通常どおりのページデザインになります。再びそのドメイン上で有効にしたい場合、同様にクリックします。
![「Dark Reader」拡張機能で、一時的にサイトのダークモードを無効化する手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_49.png)
ダークテーマの検出機能の有効化
サイトによっては、元々ダークモードが実装されている場合があります。TwitterやInstagramなどです。こういったサイトで本拡張機能を使うと、ちょっと色がおかしくなったり、元のダークモードより見にくくなる場合があります。そういった問題を解決したい場合、「ダークテーマの検出」機能を有効にします。
Twitterなどの元々実装されているダークモードにしているサイトを開きます。拡張機能のポップアップをクリックして、「サイト上の切替を設定」をクリックします。ドメイン名の下に小さく書かれています。
![「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_43.png)
「ダークテーマの検出」をクリックします。
![「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_44.png)
そのサイトからダークモードが検出された場合、元のダークモードを優先するようになります。Twitterでダークブルーテーマにしている場合、そのままダークブルーテーマのままです。
![「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_45.png)
キーボードショートカットで切り替え
キーボードショートカットで、本拡張機能の有効・無効、そのサイトの切り替えを割り当てられます。
Chromeブラウザで「chrome://extensions/shortcuts
」にアクセスするか、「Dark Reader」拡張機能のポップアップを開いて、「サイト上の切替を設定」→「クリックでショートカットを設定」をクリックします。
![「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_46.png)
Chrome拡張機能のショートカットキーページが表示されます。「Dark Reader」拡張機能を探します。拡張機能を有効にする、現在のサイトの切替など、いくつかの項目が用意されています。
キーを設定したい項目の鉛筆マークをクリックします。左側のボックスにカーソルを当てて、割り当てたいショートカットキーを押します。
![「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_40.png)
試しに「現在のサイトの切替」に、Alt+Dを割り当ててみました。
![「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_41.png)
サイト上でキーを押すと、素早くダークモードの有効・無効を切り替えられます。
![「Dark Reader」拡張機能をショートカットキーで切り替えてみたGIF画像](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_35.gif)
ダークモードにしたサイトのサンプル画像
以下、いくつかダークモードにしたサイトのスクリーンショットを貼っておきます。当サイトです。
![「Dark Reader」拡張機能を使って、ナポリタン寿司のサイトをダークモードにした画像2](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_36-1000x543.png)
「Yahoo! JAPAN」です。
![「Yahoo! JAPAN」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_39-1000x515.png)
Vivaldiブログです。「Vivaldi(ヴィヴァルディ)」は、僕が愛用しているウェブブラウザアプリです。
![「Vivaldi公式ブログ」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_37-1000x569.png)
「Amazon」です。
![「Amazon」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_38-1000x543.png)
僕のYouTubeチャンネルです。
![「ナポリタン寿司のYouTubeチャンネル」のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_42-1000x508.png)
ブラック・ホワイトリストの設定
「基本はダークモードで、特定のサイトだけ通常のテーマを利用する。」といったブラック・ホワイトリストを設定できます。ホワイトリストとブラックリストの違いを書いておきます。
ホワイトリスト | 特定のサイトでダークテーマを許可する |
ブラックリスト | 特定のサイトでダークテーマを禁止する |
一部サイトで見えにくくなった場合に役立ちます。例えば、当サイトを本拡張機能でダークモードにすると、図形の色が反転してしまい、見えにくくなる場合があります。
![ライトモードとダークモードの比較画像 場合によっては色が反転して見えにくくなる](https://www.naporitansushi.com/wp-content/uploads/2021/12/dark-reader_14.png)
当サイトをブラックリストに登録してみます。ブラックリストに登録したいサイトのURL(アドレス)をコピーします。
![ブラックリストに登録したいURLをコピー](https://www.naporitansushi.com/wp-content/uploads/2023/07/dark-reader_50.png)
拡張機能ボタンをクリックして、サイトリストをクリックします。
![拡張機能ボタンをクリック サイトリストをクリック](https://www.naporitansushi.com/wp-content/uploads/2022/02/dark-reader_12.jpg)
「ブラックリスト」を選択して、先ほどコピーしたURLを貼り付けて、Enterを押します。
![ブラックリスト URLを貼り付ける](https://www.naporitansushi.com/wp-content/uploads/2022/02/dark-reader_13.png)
当サイトで、ダークモードがオフになります。登録するサイトは、ドメイン単位で管理されています。
当サイトの「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(ダークリーダー)」についてでした。
背景を黒にするだけで、目のチカチカが減ります。簡単にオンオフを切り替えられるので、ダークモードが好きな方だけでなく、今まで通常モードを利用していた方にもおすすめです。