Webサイトを強制的にダークモードにする「Dark Mode Safari」と「Dark Reader」

macOS Mojaveからはダークモードが搭載され、黒色が好きな僕は非常に気に入っている機能なのだが、現状WebサイトはWebサイト側が独自にダークモードを用意するかダークモード向けに特殊な実装をする必要がある。

そのため大抵のWebサイトではmacOSがダークモードでもWebサイトは従来のままの表示である。

ここではWebサイトに強制的にダークモードを適用させるSafari向け拡張機能「Dark Mode for Safari」と同様の機能を持ったGoogle Chrome向け拡張機能「Dark Reader」を紹介する。

どちらの拡張機能でも上記画像のようにほとんどのWebサイトでダークモードを適用させることが可能だ。

Dark Mode for SafariとDark Readerの概要

Dark Mode for Safari

Dark Mode for Safariは250円の有料拡張機能であり、機能としてはWebサイトの色を強制的に反転させてWebサイトにダークモードを適用させる仕組みだ。

そのためYouTubeやTwitterのようにダークモードが独自に用意されているサイトの場合、逆にページが白く表示されてしまうという欠点があるがフィルタ機能があるので特定のWebサイトではダークモードを無効にすることも可能だ。

Webサイトにダークモードを適用させる拡張機能には他に高機能な「Dark Reader for Safari」というのもあるが、そちらは610円でありダークモードをWebサイトに適用させるための拡張機能に610円は高すぎるのでSafariユーザーなら「Dark Mode for Safari」の方がいいだろう。

Dark Reader

Dark Readerは前述したようにSafari版は610円という高価格だが、Google Chromeの拡張機能版は無料であり、機能も申し分ない。

Google Chromeを利用しているなら「Dark Reader」が最も完成度が高いだろう。

Dark Mode for Safariと同じくフィルタ機能でWebサイトごとにダークモードの無効/有効の切り替えが可能な他、コントラストを調整してダークモードの色合いを細かく選択することもできる。

使い方

Dark Mode for Safari

Dark Mode for Safariを購入して起動したらまずは拡張機能を有効にするために「Enable Dark Mode Safari」をクリック。

Safariの拡張機能(機能拡張)設定画面が開くので左パネルの「Dark Mode」にチェックをつけて有効化しよう。

有効化すると自動でWebサイトにダークモードが適用され、Safariのツールバーには上記のようなアイコンが表示される。

この拡張機能は冒頭でも書いた通りWebサイトを反転させてダークモードを実現しているため、Webサイトによっては上記画像のように望まない色合いになってしまう場合がある。

特定のWebサイトやWebページでダークモードを無効にするにはツールバーのアイコンをクリックして「Add This Page」「Add Entire Site」をクリックしてフィルタリングしよう。

「Add This Page」はそのページのみで無効化、「Add Entire Site」はドメイン全体で無効化する。

例えばこのブログで「Add Entire Site」をクリックすれば「inforgnoraphy.blue」以下の全てのページでダークモードが無効化される。

また「Turn On」となっている部分をクリックして「Turn Off」にすれば拡張機能自体を無効化することも可能だ。

なお、この拡張機能には複数のカラーが用意されており、好みに応じてダークモードの色合いを変えることもできる。

各色合いの見た目は以下の通り。

Dark Mode(デフォルト)
Softer Dark Mode
Dark Curtain
Mono Mode

250円の有料アプリにしてはカスタマイズの自由度は乏しいが基本的な機能は一通り揃っている。

Dark Reader

Google ChromeでDark Readerを導入すると画面右上にDark Readerのアイコンがあるのでクリックするとサイトごとのフィルタリングや色合いやコントラストなどを変更することが可能だ。

こちらはDark Mode for Safariとは違って色合いを反転させるのではなく、独自の判定で背景の色合いを暗くさせるため、Dark Mode for Safariのように意図していないダークモードが適用されることは少ない。

特定のWebサイトで無効化する場合は左側のアドレス部分をクリックしてオン/オフができる他、右側の「オン・オフ」をクリックすれば拡張機能自体のオン/オフも可能だ。

自分で細かな色合いやコントラストなどは変更できるもののDark Mode Safariと違ってあらかじめ用意されているカラースタイルはなく、色合いは自分で調整する必要がある。

まとめ

ダークモードに拘るのは僕くらいかもしれないが、せっかくmacOSのUIがダークモードなのだからWebサイトも基本的にダークな色を適用したいといった場合には上記拡張機能が役立つだろう。