最近Windows 10やmacOS MojaveではUIを暗い系統の色で表示できる「ダークモード」が導入されて話題を集めています。
残念ながらOSのダークモードを有効にしても、ブラウザで表示するWebサイトのコンテンツの色までは変更できませんが、拡張機能の「Dark Reader」をインストールすればこれが可能となります。
Dark ReaderはChromeやFirefox、Safariに対応している拡張機能で、単にダークモードを有効にできるだけでなく、カラーフィルタの細かな調整や、サイト毎の設定も可能となっています。
以下使用方法を説明します。
Dark Readerの使用方法
Chromeの場合はChromeウェブストアに、Firefoxの場合はFirefox Add-onsサイトに、Safariの場合はApp Storeに(Safari版は有料のようです)アクセスして拡張機能をインストールします。
Dark Readerのアイコンをクリックし、画面右上に表示されている「オン」ボタンをクリックすると拡張機能が有効となります。ドメイン名の横のチェックマークは、そのドメインで色の変更が有効になっているかどうかを示しています。
▲その下の「フィルタ」タブではダーク・ライトモードの他、輝度やコントラスト、セピア、グレースケールなどのカラーフィルタの設定を行うことができます。色を設定した後「このサイトでのみ適用」ボタンをクリックすると、調整した設定がサイトでのみ適用されるようになります。
▲実際にカラーの変更が適用されるかどうかは「サイトリスト」タブで決まります。サイトリストで「ホワイトリスト」が選ばれている場合はリストに含まれるドメインにだけ適用され、「ブラックリスト」が選択されている場合はリストに含まれているドメインだけが除外されます。
少し分かりづらいところですが特定のサイトだけダーク系の色で表示したい場合、ホワイトリストにサイトを追加して使用すると良いでしょう。なおサイトリストへドメインを追加・削除するには上部のドメイン名のボタンをクリックします。
Dark Readerの使用方法は公式ドキュメントでも詳しく解説されています。
まとめ
Dark Readerを使用すればかなり自然な感じのダークモードをWebブラウザで簡単に利用することができます。将来的にはWebブラウザ本体の機能として導入される可能性もありそうですが、それまで待てない場合インストールして試してみてはいかがでしょうか。
