当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2021年9月7日Chrome拡張機能

「Dark Reader」のアイコン

この記事では、PCブラウザで開いたウェブサイトの背景を、強制的にダークモードに切り替えてくれるChrome拡張機能「Dark Reader(ダーク・リーダー)」について書きます。

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

「Dark Reader」拡張機能を使って、ナポリタン寿司のサイトをダークモードにした画像1

ワンクリックで、ブラウザで表示しているウェブサイトをダークモードにするChrome拡張機能です。

ダークモードに対応していないサイトを、強制的にダークにしてくれます。具体的には、文字を白、背景を黒にしてくれます。ライトモードの時は文字が黒、背景が白です。反転させます。

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

インストールするだけで、すぐに利用できます。ワンクリックでオンオフできます。特定のサイトを除外するブラックリスト、ホワイトリストを設定できます。強制的にダークモードにするので、一部ページでは、文字や図形が見えにくくなるというデメリットもありますが、「白背景がまぶしい!」という方におすすめです。

通常、ウェブブラウザ本体のテーマをダークモードにしても、開いているウェブサイトまでは黒になりません。本拡張機能を利用することで、ウェブサイトを暗くできます。

Google Chromeで「ナポリタン寿司のPC日記」を開いた画像

僕は今まで、ダークモードを使ったことがありませんでした。初めて本拡張機能でダークモードにした時、びっくりしました。体感として、ライトモードの時より目に良いと思いました。

合わせて読みたい

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

リリース元:Alexander Shutau
記事執筆時のバージョン:4.9.64(2023年6月22日)

インストール方法

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

Firefoxをご利用の場合

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

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

参考:Dark Reader for Safari

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

「Dark Reader」拡張機能をインストールする手順画像1

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

「Dark Reader」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Dark Reader」拡張機能をインストールする手順画像3

インストールした時、もしかしたら自動で「Help -Dark Reader」ページが開かれるかもしれません。不要な場合は、タブを閉じましょう。

「Dark Reader」拡張機能をインストールする手順画像4

頻繁に本拡張機能のポップアップを開く場合、右上にある拡張機能のパズルアイコンをクリック→「Dark Reader」の右にあるピンアイコンをクリックします。オーバーフローメニューではなく、直接ツールバーに配置されます。

「Dark Reader」拡張機能をインストールする手順画像5

使い方

本拡張機能をインストールすると、自動的に全てのウェブサイトがダークモードになると思います。なっていない場合は、設定から本拡張機能をオンにします。

本拡張機能のオンオフ切り替え

適当に本拡張機能が動作するサイトを開きます。ChromeウェブストアやChromeの設定ページでは動作しないので注意です。当サイトGoogleなど、好きなページを開きます。

サイトを開けたら、インストールした拡張機能アイコンをクリックして、「オン」を選択します。右上の「オン・オフ」が全てのウェブサイト全体の切り替えです。サイトのドメインごとではありません。

「Dark Reader」拡張機能をオンオフする手順画像

ウェブサイトが強制的にダークモードになります。当サイトは、眩しいライトモードです。ダークモードなんて用意していません。本拡張機能を使うことで、ダークモードが用意されていない当サイトでも、無理やりダークモードにしてくれます。

「Dark Reader」拡張機能を導入する前と後の当サイト比較画像

輝度、コントラスト、セピア、グレースケールの調整

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

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

拡張機能ポップアップのスライダーを調整します。

「Dark Reader」拡張機能でフィルターを調整する手順画像

動画も貼っておきます。コントラストをあげることで、より黒に近いダークモードにできます。

ドメイン上で一時的にダークモードを無効化する方法

デフォルトでは全てのサイトが自動的にダークモードになります。サイトによっては、ダークモードにすることで逆に見にくくなる場合があります。そういった場合に、そのドメイン上では本拡張機能でダークモードにしないよう設定します。

ダークモードにしたくないサイト(ドメイン)ページを開きます。拡張機能のポップアップを開いて、左上のドメイン名をクリックします。例えば、当サイトを開いている場合、ここのドメイン名は「www.naporitansushi.com」になっていると思います。

「Dark Reader」拡張機能で、一時的にサイトのダークモードを無効化する手順画像1

ドメイン名の左がチェックマークから「×」マークになります。この間は、拡張機能のダークモードが解除されて、通常どおりのページデザインになります。再びそのドメイン上で有効にしたい場合、同様にクリックします。

「Dark Reader」拡張機能で、一時的にサイトのダークモードを無効化する手順画像2

ダークテーマの検出機能の有効化

サイトによっては、元々ダークモードが実装されている場合があります。TwitterInstagramなどです。こういったサイトで本拡張機能を使うと、ちょっと色がおかしくなったり、元のダークモードより見にくくなる場合があります。そういった問題を解決したい場合、「ダークテーマの検出」機能を有効にします。

Twitterなどの元々実装されているダークモードにしているサイトを開きます。拡張機能のポップアップをクリックして、「サイト上の切替を設定」をクリックします。ドメイン名の下に小さく書かれています。

「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像1

「ダークテーマの検出」をクリックします。

「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像2

そのサイトからダークモードが検出された場合、元のダークモードを優先するようになります。Twitterでダークブルーテーマにしている場合、そのままダークブルーテーマのままです。

「Dark Reader」拡張機能で、「ダークテーマの検出」を有効にする手順画像3

キーボードショートカットで切り替え

キーボードショートカットで、本拡張機能の有効・無効、そのサイトの切り替えを割り当てられます。

Chromeブラウザで「chrome://extensions/shortcuts」にアクセスするか、「Dark Reader」拡張機能のポップアップを開いて、「サイト上の切替を設定」→「クリックでショートカットを設定」をクリックします。

「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像1

Chrome拡張機能のショートカットキーページが表示されます。「Dark Reader」拡張機能を探します。拡張機能を有効にする、現在のサイトの切替など、いくつかの項目が用意されています。

キーを設定したい項目の鉛筆マークをクリックします。左側のボックスにカーソルを当てて、割り当てたいショートカットキーを押します。

「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像2

試しに「現在のサイトの切替」に、Alt+Dを割り当ててみました。

「Dark Reader」拡張機能にショートカットキーを割り当てる手順画像3

サイト上でキーを押すと、素早くダークモードの有効・無効を切り替えられます。

「Dark Reader」拡張機能をショートカットキーで切り替えてみたGIF画像

ダークモードにしたサイトのサンプル画像

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

「Dark Reader」拡張機能を使って、ナポリタン寿司のサイトをダークモードにした画像2

Yahoo! JAPAN」です。

「Yahoo! JAPAN」のスクリーンショット

Vivaldiブログです。「Vivaldi(ヴィヴァルディ)」は、僕が愛用しているウェブブラウザアプリです。

「Vivaldi公式ブログ」のスクリーンショット

Amazon」です。

「Amazon」のスクリーンショット

僕のYouTubeチャンネルです。

「ナポリタン寿司のYouTubeチャンネル」のスクリーンショット

ブラック・ホワイトリストの設定

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

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

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

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

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

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

こちらで紹介したドメイン名をクリックして、オンオフを切り替える方法、こちらで紹介したショートカットキーでの切替方法でもOKです。これらの操作をすると、自動的にブラックリストに放り込まれます。

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

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

「ブラックリスト」を選択して、先ほどコピーした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(ダークリーダー)」についてでした。

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

2021年9月7日Chrome拡張機能