すべてのWebページを「ダークモード」にする! Chrome/Firefox/Safari/Edge用「Dark Reader」

写真拡大 (全9枚)

夜、暗い部屋でWebページを見るとき、背景が白で明るいと、刺激が強すぎて見づらい。
そのようなとき、ページの背景を黒などの暗い色に変える「ダークモード」を適用できたら便利だろう。

今回は、すべてのWebページに自動的にダークモードを適用できる「Dark Reader」を紹介しよう。


●色のカスタマイズや適用するサイトの制限もできる
WindowsやMac、iOS/Androidなどにはアプリケーションの背景を暗くする「ダークモード」が用意されている。暗い部屋で画面を見るときなど、背景が白だと明るすぎて目が疲れてしまう。

しかし、ダークモードにすれば、背景が暗いので文字が読みやすくなる。
また、節電効果も期待できる。

これをWebページで実現するのが、Chromeの拡張機能「Dark Reader」だ。
インストールして機能を有効にすると、表示するすべてのWebページを、背景が暗いタークモードで表示できるようになる。なお、「Dark Reader」はChrome用だけでなく、Firefox、Safari、Microsoft Edge用も用意されている(SafariはApp Storeからインストールする)。


拡張機能「Dark Reader」のWebサイト。Google Chrome、Firefox、Safari、Microsoft Edge用が用意されている。



Chromeの場合は、Chromeウェブストアで「Dark Reader」を検索し、インストールではる。


基本的には、「Dark Reader」をインストールすれば自動的に機能が有効になり、表示するWebページはすべて自動的にダークモードになる。拡張機能のアイコンをクリックしてパネルを開けば、オン/オフを切り替えられる。また、[Alt]+[Shift]+[D]キーでオン/オフを切り替えることも可能だ。


インストールするとWebページがダークモードになる。拡張機能のアイコンをクリックしてパネルを開き、オン/オフを切り替えられる。


アイコンのクリックで表示されるパネルの[フィルタ]タブでは、「ダーク」か「ライト」を選び、「輝度」「コントラスト」「セピア」「グレースケール」の4項目で色を調整できる。また、調整した色を、現在のページにだけ適用することも可能だ。


[フィルタ]タブでは色をカスタマイズできる。



色をカスタマイズした例1



色をカスタマイズした例2


[サイトリスト]タブは、特定のページにだけダークモードを適用したいとき利用する。
[ホワイトリスト]をクリックしてWebサイトのURLを入力すれば、そのサイトにはダークモードが適用され、それ以外のサイトには適用されなくなる。

逆に[ブラックリスト]をクリックしてWebサイトのURLを入力すれば、そのサイトにはダークモードが適用されず、それ以外のサイトにはダークモードが適用される。

[その他]タブでは、フォントと文字の太さ(テキストストローク)を設定できる。


[サイトリスト]タブでは、ダークモードを適用するサイトをホワイトリストかブラックリストで指定する。



[その他]タブではフォントを設定できる。


シンプルな拡張機能だが、すべてのWebページにダークモードが適用されるので、ダークモードメインで利用したいユーザーには便利だろう。

なお、実際に利用するとホワイトリストとブラックリストの設定が少し分かりづらい。
言葉だけを聞くと、
・ホワイトリスト=背景を白にするサイトのリスト
・ブラックリスト=背景を黒にするサイトのリスト

このように誤解しがちだが、実際の意味は次のとおりだ。

・ホワイトリスト=この拡張機能を適用するサイトのリスト
・ブラックリスト=この拡張機能を適用しないサイトのリスト

その点に注意すれば、便利な拡張機能なので、興味があれば、ぜひ試してみてほしい。

Dark Reader
Dark Reader for Chrome
Dark Reader for Firefox
Dark Reader for Safari
Dark Reader for Edge


井上健語(フリーランスライター)