Twitterなどダークモードを採用したWebサイトが増えてきましたが、全てのサイトがダークモードで観覧ができたら良いなと思っている人も多いですよね。
ブラウジングをする際ダークモードにすると、消費電力の節約や目の疲労を軽減するメリットがあります。
WebサイトをダークモードにできるChrome拡張機能「Dark Reader」を紹介します。
簡単にダークモードにすることができる上に、ショートカットキーで拡張機能のオン/オフもできるのでオススメです。
この記事ではDark Readerの使い方や機能を紹介していきます。
WebサイトをダークモードにできるChrome拡張機能「Dark Reader」
Chrome拡張機能Dark Readerを使えば追加されたアドオンをクリックするだけで、Webサイトをダークモードでブラウジングできます。
当ブログをDark Readerでダークモードにしてみましたが自動でフォント色などが切り替わるので、見にくくなることなくダークモードに切り替えることができました。
Dark Readerでできること
Dark Readerではただダークモードにするだけではなく、色調の設定やダークモードにしたくないWebサイトをリスト化できるなど様々な機能が搭載されています。
1.フィルター
- ダークモードの切り替え
- 色調の調整
2.サイトリスト
- Dark Readerを反映させたいWebサイトのリスト作成
3.その他
- フォントの選択
- テキストストロークの調整
- 好みのテーマを生成
各設定画面では上記の調整をすることができます。
色調補正やテキストストロークの調整など、Webサイトを自分が見やすいように調整できるのは嬉しい機能。
詳しい設定画面の解説をしていきます。
Dark Readerの使い方
ChromeウェブストアよりDark Readerをインストールしたら、すぐに使い始めることができます。
Chrome右端上部にあるメガネをかけているアイコンが目印。オンにするとスターウォーズのダースベイダーに似たアイコンに変わります。
オン/オフでアイコンが変わるので、拡張機能が作動しているかどうか一目でわかりやすいです。
オンにしている状態で細かい設定をすることができます。
ブラウザーに保護されているページではDark Readerを使っても反映されません。
もし機能しない場合は、サイトの切り替え部分に「このページはブラウザによって保護されています」と表示されていないかご確認ください。
細かい色調補正やサイトの切り替えもワンクリック
Webサイトをダークモードにできるだけではなく、色調を細かく設定することができます。
サイトの切り替えもクリックするだけで、開いているサイトの切り替えや拡張機能のオン/オフも簡単に切り替えすることが可能。
- 輝度
- コントラスト
- セピア
- グレースケール
色調設定をすることによって色の変化は動画で紹介しているので、どの程度まで色調設定ができるか気になる方は動画をチェックしてみてください。
時間の指定をして自動にダークモードへ切り替え
Dark Readerは、時間指定をすることによって自動で拡張機能を起動してくれる機能が搭載されています。
時間指定方法はアドオンの管理画面にある、拡張機能の切り替えの横にカーソルをあてると設定することができます。
開始時間と終了時間を設定したら、時間指定ボックス左のチェックボックスにチェックを入れて設定完了です。
無事に設定が完了したら、時計アイコンが表示されるようになります。
リストを作成して特定のWebサイトのみ反映できる
リストを作成することによって、特定のWebサイトのみDark Readerを反映させることが可能です。
サイトリストへWebサイトの追加は、右上の現在のサイトをクリックすることによって追加することができます。
- ホワイトリスト→特定のWebサイトをダークモードに反転。
- ブラックリスト→特定のWebサイトをライトモードに反転。
ホワイトリスト選択時にはリストに追加したWebサイトのみダークモードになるので、他サイトはライトモードに反転して表示されます。
個別に切り替えたい時はリストに追加するよりも、『現在のサイトを切り替える』機能を使った方が使いやすかったです。
「このサイトはいつもライトモードでみたい」という人は、リストに追加して管理すると便利。
テキストストロークを調整してさらに読みやすい環境に
自身が読みやすいフォントやテキストストロークでWebサイトを観覧することができます。
フォントを変えるにはフォントの種類を選択後に、チェックボックスにチェックを入れれば設定が反映されます。
テーマの生成もできるので、読みやすい環境で快適なブラウジングをすることが可能。
- フィルタ：ページ全体を反転して、一部を元のデータに戻す。（サイトによって読み込みスピードが遅くなることがあります。）
- フィルタ+：フィルタと同じ機能ですが、SVGフィルタを元に色を処理して画像のぼやけを軽減する。
- 静的：素早くスタイルシート生成。
- 動的：より詳しくWebサイトを分析して、より視聴しやすいダークモードの表示ができるようになります。
基本的には動的のテーマを使用していれば問題ないと思います。
ショートカットキーを使えばさらにスムーズに使用できる
アドオンの有効化や現在のサイトの有効化など、ショートカットキーを使って切り替えることができます。
Chrome拡張機能の設定からショートカットキーの設定をすることで、任意のショートカットキーを割り振ることも可能です。
Dark Readerのテキストリンクから直接ショートカットキーの設定画面に移動することができます。
デフォルトの状態では、現在のサイトの切り替えと拡張機能のオン/オフが設定されています。
- 拡張機能を有効にする
- 現在のサイトを切り替える
- テーマ生成モード
- 拡張機能の切り替え（オン/オフ）
装飾キー
⇧→shift
⌥→optionまたはalt
4つのショートカットキーは自身が使いやすいショートカットキーに置き換えることができるので、他のアドオンと被らないように設定することも可能です。
基本的にはデフォルトの状態でスムーズにDark Readerを使用できます。
Webサイトをダークモードにしたい人であればDark Readerはめちゃくちゃオススメ！
WebサイトをダークモードにできるChrome拡張機能「Dark Reader」を紹介しました。
ブラウジングする上で様々なメリットがあるダークモードですが、実装されていないサイトでないとダークモードに切り替えることができません。
Dark Readerを使用すればブラウザーに保護されていないページを除けば、全てのWebサイトがダークモードでブラウジングすることができます。
Chromeを使用している人であれば無料で快適なブラウジング環境が手に入れることができるので、オススメしたいChrome拡張機能です。
- ブラウジングする時はダークモードを使用している
- Webサイトによってダークモードとライトモードで切り替えたい
- 時間指定をして自動に切り替えたい
- ショートカットキーに対応している
- 自分自身がブラウジングしやすく色調などカスタマイズしたい
日頃からダークモードを使用している人は、ぜひともDark Readerを使用してみてください。
Chrome拡張機能を使うならまずは入れておきたいアドオン記事
コメント