ダークモードに対応していないWebサイトを無理やりダークモードにする拡張

こんにちは、ダークモード推奨派のManaです。以前からダークモードの布教活動を細々としておりますが、まだまだダークモードに対応していないWebサイトもたくさんあります。今回はダークモードに対応していないWebサイトを強制的にダークモードにしちゃう拡張を紹介します。


UIデザイン必携

以前『Webサイトをダークモードに対応させよう』という記事でも紹介しましたが、私、暗所では光が強くて目がつらいんですよね。

この画像のように、暗いところでスマホを見たらスマホ以外何も見えませんし、スマホのちょっとした光も眩しすぎて目が痛いのです。ダークモードを勧めている理由も、単にかっこいいとか、はやっているという次元の話ではありません。私のように光に過敏で明るいUIが見づらいユーザーもいます。

背景色は #000(真っ黒)がいい…!!

ありがたいことに、ダークモードに対応したWebサイトも徐々に増えてきているように思います。しかし、背景色がダークグレーなWebサイトも多く、これがまた私の目を苦しめております…。

私のように光に過敏な人にとっては、ダークグレーであっても発光しているので結局は画面全体が光って見えます。有機ELディスプレイでは、ピクセルが個別に発光する仕組みのようで、画面を #000(=真っ黒)にすれば発光がオフになります。つまりコンテンツ内容のみが浮かび上がって格段に読みやすくなるのです。微々たる違いかもしれませんが、私にとっては大問題。背景色は絶対に真っ黒にしたい…!そんな小さな願いを叶えてくれる拡張機能を探しました。

デスクトップ用 Chrome拡張

Super Dark Mode

まずはChromeの拡張機能の「Super Dark Mode」。基本的にはインストールのみで使用できます。Chromeの拡張アイコンをクリックしてダークモードの切り替え可能。


また、色の細かい設定もできるので、ここで背景色を #000 に設定して快適に利用しています!ありがたやー!

iOSアプリ

iOSのアプリはSafariの拡張として利用します。アプリをインストールした後、Safariの検索バーの左端にある「AA」(または「ああ」)というアイコンをタップ。その後出てきたメニューから「機能拡張を管理」をタップします。インストールしたアプリの名前が表示されるので、オンにすれば設定完了です。詳しくは『機能拡張を入手してiPhoneのSafariをカスタマイズする』という記事を参照してください。

Neo Noir

まず試したのが「Neo Noir」という拡張アプリ。無料でサクッと使えるので使いやすそうだったのですが、Neo Noirという割には背景色がダークグレーのみだったので別のアプリを探すことに。

Nitefall

次に試したのが「Nitefall」です。こちらも上記の手順でかんたんに設定できました。画像の明るさも調整できます。こちらは買い切り490円。

デフォルトでは背景色はダークグレーでしたが、「AA」アイコンをタップした時に表示される「Nitefall」のオプション画面から3種類のテーマから選択でき、「Midnight」にすると真っ黒の背景色になりました!やった!ということでこの拡張を利用しています。


私の場合は背景色が真っ黒じゃないと見づらいのですが、みんながみんなそうではないと思うので、「Nitefall」のように複数のテーマから選択できるのはいいですね。ぜひ試してみてください!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)