石の上にも三年という言葉を最近実感している、t-miyajimaです。
さて今回は、macOSのSafariを使っていて、背景が真っ白のウェブサイトをもっと暗くできないか、というご要望に無料で手早くお答えできるソリューションのご提案です。
無駄なことは書かずに簡潔にいきます！
- Safariをダークモードにする有料アプリはあるけれど……
- ただ全体的に少し暗くなるだけでだいぶ違う
- 簡単お手軽に目に優しい暗い表示にする方法
いちおう、macOSでなくWindowsでも使える方法ではあります。
１．Safariをダークモードにする有料アプリはあるけれど……
有料アプリとして、Safariの表示を暗くするものは色々ありました。
Dark Mode for Safariとか、Dark Reader for Safariとか……
有料アプリを購入する前に試しに使ってみることができれば、これらのアプリでも良かったのかもしれませんが……いかんせん、試しに使えないので購入はためらわれました。
更に検索して、無料のも入れてみましたが、ブラウザでアクセスしたデータとか、パスワードとかを読み取る危険性があると表示されて、それはセキュリティ上ダメだなと思い、無料の拡張機能もアンインストールしました。
２．ただ全体的に少し暗くなるだけでだいぶ違う
背景がFFFFFFの真っ白だと眩しいんですよね。
それが、CCCCCCあたりになるだけでもだいぶ違う。
30%とか暗くなるだけで眩しくないんです。
白を黒に、黒を白に、とか色を反転する必要はないんですよね……。
３．簡単お手軽に目に優しい暗い表示にする方法
結論から書くと、ユーザースタイルシートにブラウザの画面全体を暗くする表記を追加するだけです。
手順は以下です。
（１）パソコンの好きなフォルダに以下のユーザースタイルシートを保存する
html {
filter: brightness(0.6);
}
ファイル名は、darkmode.css という具合です。拡張子はcssにします。
また、0.6は40%ほど暗くするという意味です。もっと暗くしたいなら、0.5とか0.4とかにします。もっと明るくしたいなら、0.7とか0.8とかにします。
（２）Safariのユーザースタイルシートに、上で保存したスタイルシートを指定する。
Safariの環境設定の以下の場所でスタイルシートを指定します。
これだけで、画面が全体的に少し暗くなります。
あとは上記の数値を0.6から調整して、お好みの暗さにしてください。
以上。
※このユーザスタイルシートは、たまに変な表示になることがあります。例えばHTML要素が入れ子になっている場合、中のHTML要素は二倍暗くなります。
