Help us understand the problem. What is going on with this article?

Dark Readerを利用してWebサイトをとことんダークモードにする

More than 1 year has passed since last update.

macOS Mojaveからダークモードが搭載され、標準アプリや対応アプリが増えて、だいぶといい感じになってきたのですが、それ故にすべてをダークモードで揃えたくなる衝動が抑えられなくなってきたので、衝動を抑えずにやってみました。

スクリーンショット 2019-03-05 15.24.33.png

Dark Reader最高

以前にGIGAZINEさんで紹介されていたDark Readerを利用してWebサイトをダークモードにしてみました。Google Chrome、Firefox、Safariに対応していますが、SafariはMac App Storeで有償($4.99)となっています。(2019/03/05時点)

Chrome・Firefox・Safariを簡単に「ダークモード」にできる拡張機能「Dark Reader」を使ってみた - GIGAZINE
https://gigazine.net/news/20181205-dark-reader/

Dark Reader
https://darkreader.org/

Dark Reader - Chrome ウェブストア
https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ja

すべてのウェブサイトにダークテーマを適用します。夜間や毎日のブラウジングにDark Readerを使用し、あなたの目を気遣います。
このアイ・ケアの拡張機能は、オンザフライでウェブサイトのためのダークテーマを作成し、ナイトモードを有効にします。 Dark Readerは鮮やかな色を反転させてコントラストを高め、夜間に読みやすくします。

目を気遣うとか、バッテリーの持ちが、とかそんなのはどうでも良いのです。見た目をダークモードで揃えたいのです。

詳しい利用方法はGIGAZINEさんの記事をご参考ください。

Qiitaのホームです。いい感じですねー。スクリーンショット 2019-03-05 15.20.12.png

これまでにも、Webサイトをダークモードにする拡張機能はありましたが、画像の色彩まで反転されてしまって敬遠してたのですが、Dark Readerは画像はそのままにしてくれます。サイト毎に設定を変更することができ、フィルタ設定で細かな調整もできます。
スクリーンショット 2019-03-05 15.22.05.png

フィルタ設定を弄らずとも拡張機能のメニュー「その他」にあるテーマエンジンの指定でだいたいのWebサイトで適切な設定をみつけることができます。
スクリーンショット 2019-03-05 15.23.49.png

  • テーマエンジン: フィルタ スクリーンショット 2019-03-05 15.24.33.png
  • テーマエンジン: フィルタ+ スクリーンショット 2019-03-05 15.24.20.png
  • テーマエンジン: 静的 スクリーンショット 2019-03-05 15.24.05.png
  • テーマエンジン: 動的 スクリーンショット 2019-03-05 15.34.53.png

しばらく利用していますが、ブラウザが極端に重くなったりすることはなく今のところは快適に利用できています。

参考

Chrome・Firefox・Safariを簡単に「ダークモード」にできる拡張機能「Dark Reader」を使ってみた - GIGAZINE
https://gigazine.net/news/20181205-dark-reader/

Dark Reader
https://darkreader.org/

Dark Reader - Chrome ウェブストア
https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=ja

kai_kou
2004年からWeb系のシステムエンジニアとして開発、運用、マネジメントを経験。現在はアイレット(クラウドパック)に所属。 べ、別にいいね貰えたからってモチベーションが上がって記事とコードの品質があがるわけじゃないんだからね///
https://twitter.com/k_aik_ou
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away