こんにちは！ mnbd（@mnbbbbbd）です。
PCやスマホでウェブサイトを見る際に、背景色と文字色を反転させて見ることができるのを知ってますか？
今回は、ウェブサイトの背景色と文字色を反転して表示する方法を紹介します。
ダークモードの普及
近年、アプリやWindowsのようなOSレベルでも「ダークモード」や「ナイトモード」と称して黒い背景に白い文字に反転させて表示することができるようになってきています。
ダークモードとライトモードのどちらを選ぶかは好みによるところがありますが、一般的にダークモードは目に優しいと言われていますし、スマホなどの画面が有機ELですとダークモードにすることで消費電力も抑えることができます。
Dark Readerとは
ウェブサイトの背景色と文字色を強制的に反転して表示してくれる、ブラウザの拡張機能です。
すべてのウェブサイトを問題なく表示できるわけではありませんが、私が使用使用している限り、かなりの確率でダークモードで表示してくれるすぐれものです。
対応ブラウザ
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
Dark Readerの注意点
ウェブサイトの表示の乱れ
Dark Readerはウェブサイトの表示色を強制的に反転させています。
本来、ウェブサイトは制作者の作り方に依存しているため、表示の乱れや不要な文字が表示されてしまうことがあります。
Firefoxで表示の乱れすサイトの一覧については別記事にありますので、そちらもご覧ください。
記号フォントの文字化け
上記に関連しますが、Google Chrome版Dark Readerの特有の問題として、私の環境では記号フォントの一部が文字化けしてしまいます。
文章を読めなくなるわけではないので実害は少ないのですが、よく見るウェブサイトが文字化けしていると気分のいいものではありません。
現時点で私は不具合の原因をつかめていませんが、分かり次第、この記事に追記していく予定です。
Dark Readerをインストール
- Dark Reader – Chromeウェブストアから「Chrome に追加」をクリックしてください。
- 「拡張機能を追加」をクリックしてください。
- Chromeブラウザの右上にDark Readerのアイコンが表示されます。
Dark Readerの動作確認
Chromeブラウザの右上のDark Readerのアイコンを右クリックすると設定メニューが開きます。
インストールされた段階で設定は「オン」になっていますので、ウェブサイトを表示すると暗い色になります。
Yahoo Japan のサイトを表示した例です。
フィルタの設定
「フィルタ」タブの設定です。
ダークモード
「ダーク」がオンの状態ですと「ダークモード」になります。黒に近い背景色になります。
ライドモード
「ライト」がオンの状態ですと「ライトモード」になります。ベージュっぽい背景色になります。
その他（輝度・コントラスト・セピア・グレースケール）
それぞれのマウスでドラッグしたりクリックしたりして色の状態を変更できます。
サイトリストの設定
「サイトリスト」タブの設定です。
ブラックリスト
「ブラックリスト」がオンの場合、リストに登録されたウェブサイトではDark Reader表示が無効になります。
Dark Readerでうまく表示できないサイトを登録することになります。
実際にリストに登録したい場合は、そのウェブサイトを表示した状態で左上のアドレスをクリックします。
削除したい場合は、登録されたリストからアドレスをDeleteキーで消してください。
Yahoo JAPANのページが登録された状態の例です。
ホワイトリスト
「ホワイトリスト」がオンの場合、リストに登録されたウェブサイトだけにDark Readerの表示が適用されます。
「ホワイトリスト」でも「ブラックリスト」でもリストは共有されますので、登録や削除の方法は同じです。
その他の設定
「その他」タブの設定です。
フォント
表示される文字のフォントを変更します。背景色によって文字が読みにくい場合に変更します。
左側をチェック状態にして、フォントリストからフォントを選択します。
テキストストローク
表示される文字に輪郭をつけます。
Yahoo JAPANの例
適用前
適用後
テーマエンジン
表示の適用されるテーマを選択します。
「フィルタ」「フィルタ＋」「静的」「動的」とあります。
テーマによって色味や表示が変わる場合があります。
まとめ
ウェブサイトの背景色と文字色を反転させて表示する方法を紹介しました。
アプリやOS同様にウェブサイトにおけるダークモード化も実装しやすくなってくるかもしれません。
そう考えるとDark Readerは過度期的拡張機能なのになる可能性もありますが、現時点ではとても重宝するソフトウェアだと思います。
長時間、PCを見なければならない多い方はぜひ試してみてください！
以上です。
読んでいただきありがとうございました！