Chromeのダークモード拡張機能を使う｜アプリでも暗くする

Chromeをダークモードにしたのに、開いたサイトが白いまま目を刺してくる。この状態で「chrome ダーク モード 拡張 機能」を調べる人が求めているのは、設定の場所ではなく、設定では届かない範囲がどこかという話です。Chromeの設定とMacのシステム設定と拡張機能は、それぞれ別の場所を暗くしています。境目を押さえると、入れるものと入れなくてよいものが分かれます。

Chromeの設定にあるダークモードは、サイトの中身を暗くしない

公式のヘルプには、この機能が何を暗くするのかがはっきり書かれています。ダークモードでブラウジングしている場合に暗い色調で表示されるのは、ホームページ、ツールバー、設定、その他のページです。言い換えると、対象はChrome自身が描いている画面に限られていて、読み込んだサイトの中身は含まれません。

設定の場所も公式に示されています。新しいタブページの右下にある「Chromeをカスタマイズ」を選び、「デザイン」で「ライト」「ダーク」「デバイス」のいずれかを選びます。「デバイス」を選んだ場合はMacの設定に従います。Chromeのヘルプでは、この機能はパソコンとiOSでは「ダークモード」、Android端末では「ダークテーマ」と呼ばれるとも補足されています。

なおMacの側でダークにする手順は、システム設定の外観の項目で切り替えます。Chromeの「デバイス」はこの設定を読み取るので、Macを夜だけダークに切り替える運用にしている場合は、Chrome側を「デバイス」にしておけば追従します。Chrome側を「ダーク」に固定すると、昼もタブの帯が暗いままになります。

ここまでで暗くなるのは、タブの帯、アドレスバー、設定の画面、履歴やダウンロードの画面です。記事を読んでいる時間の大半を占めるページ本体は白のままです。「設定したのに変わらない」という感覚のずれは、機能が壊れているのではなく、対象がはじめから別だったことから来ています。

Macのシステムをダークにしてもサイトがそのままになる理由

もう1つの層がMacのシステム設定です。システム側をダークにすると、対応しているサイトはそれを読み取って暗い配色に切り替わります。Webの側にはどちらの配色が好まれているかを伝える仕組みがあり、サイトが暗い配色のCSSを用意していれば、指定を受け取って切り替わります。

問題は、この仕組みが働くかどうかがサイト側の作りに依存する点です。暗い配色を用意していないサイトは、システムがどちらでも白のままです。実際に困っている声も、その形で残っています。

chromeで、ホワイトテーマのサイトを自動でダークテーマにしてくれる拡張機能などありませんでしょうか。 知恵袋やnoteなどのホワイトテーマベースのサイトでいきなり画面がまぶしくなってストレスです。 出典: detail.chiebukuro.yahoo.co.jp

この仕組みはサイト側が用意した配色に切り替えるものなので、切り替わったときの見た目はサイトが決めます。拡張機能が作る配色と違って崩れは起きにくく、図版も想定どおりに出ます。使えるサイトではこちらを優先するほうが安全です。

対応していないサイトのほうが多いという前提で組むほうが現実的です。特に、社内の管理画面、古い業務システム、公共機関の案内ページは、暗い配色が用意されていないことが多く、夜にいちばん長く見ている画面がそこだという人も少なくありません。システム側の設定は入口として有効ですが、これだけで完結する人は限られます。

拡張機能が引き受けている仕事

サイト側が用意していない暗い配色を、その場で作るのが拡張機能の役割です。この用途で名前が挙がるものについて、解説記事では次のように紹介されています。

そこで「Chrome」の「設定」で「ダークモード」にならないサイトにも適用できる Chrome拡張機能「DARK READER」を紹介します。 出典: 724685.com

Chromeウェブストアの掲載ページでは、利用者が7,000,000人、評価が5点満点で4.7、評価件数が1.3万件と出ています。掲載されているバージョンは4.9.133で、配布物の容量は831KiB、対応言語は39言語です。説明には2014年から続いていることと、明るい色を反転させてコントラストを高める仕組みであることが書かれています。

調整できる項目も掲載ページに並んでいます。明るさ、コントラスト、セピアのフィルター、配色の方式、フォントの設定、そして適用しないサイトの一覧です。全サイトに一律で当てる道具ではなく、当てる範囲と強さを手元で決める道具だと考えると扱いを誤りません。掲載ページには、競合を避けるため似た働きの拡張機能は無効にするようにという注意も添えられています。同じ仕事をする道具を2つ入れると、互いの結果に重ねて処理が走り、色がおかしくなる原因になります。

拡張機能を入れても暗くならない画面がある

拡張機能はどこでも動けるわけではありません。Chromeの開発者向けの公開情報では、拡張機能がページに処理を差し込める範囲は許可されたスキームのURLに限られると説明されており、そこにはhttpとhttpsが含まれます。ローカルのファイルを対象にする場合は、利用者が手動でアクセスを許可する操作が別に必要だとも書かれています。

この仕様から、暗くならない画面の見当が付きます。Chrome自身の設定の画面、新しいタブのページ、拡張機能の管理画面はChromeが描いているもので、拡張機能の処理は届きません。ここを暗くするのがChromeの設定にあるダークモードの役目で、2つは役割で分かれています。

ローカルに置いたHTMLのファイルや、手元に落としたPDFを開く画面も、そのまま暗くなるとは限りません。拡張機能の設定でファイルへのアクセスを許可する操作が要る場合があり、許可しても表示の方式によっては当たりません。夜にPDFを読む時間が長い人は、配色を反転させる道具ではなく、PDFを扱うアプリ側の表示設定を探すほうが早く着きます。

反転で崩れるものと、その調整

配色をその場で作り替える仕組みなので、崩れが出る場所には傾向があります。

• 画像の中の文字。白地の図版が反転すると、文字が読めなくなる場合があります。
• グラフと図。色で意味を持たせている箇所は、反転すると意味が変わります。
• 地図。背景と経路の色の関係が崩れます。
• すでに暗い配色を持っているサイト。二重に処理が当たって、かえって読みにくくなります。

対処は2通りです。1つは強さを下げることです。明るさとコントラストの値を少し戻すだけで、図版の読みにくさが収まる場面が多くあります。もう1つが、適用しないサイトの一覧に登録することです。地図と、色で状態を示す業務の画面は、この一覧に入れておくほうが結果が安定します。

見落としやすいのが印刷とスクリーンショットです。反転した状態で画面を取り込むと、そのまま暗い画像として保存されます。人に渡す資料を作る画面では、あらかじめ適用しないほうが手戻りが出ません。適用する画面と適用しない画面を分ける発想に立つと、この道具の設定はかなり楽になります。

当てる画面と当てない画面を先に数える

配色を触る前に、対象を数えておくと設定の往復が減ります。数えるのは3つです。

• 夜に30分以上続けて見ている画面。読み物、チャット、タスクの一覧などが入ります。ここは反転の効果がそのまま出ます。
• 色で意味を読み取っている画面。グラフのある管理画面、地図、写真を選ぶ画面。ここは当てないほうが速く終わります。
• 人に渡す画像を作る画面。資料の下書き、画面の取り込み、デザインの確認。ここも当てない側です。

この数え方をすると、当てる画面は思っていたより少ないことが多く、3個から6個に収まります。全サイトに一律で当てて例外を後から増やすやり方だと、崩れに気づくたびに設定を開くことになり、気づかないまま図版を読み違える危険も残ります。当てる側を先に決めるほうが手数が少なく、結果も安定します。

数え終わったら、当てる画面の中でいちばん長く見ているものを1つ選び、そこだけで明るさとコントラストを決めます。その値は他の画面でもおおむね使えます。最初から全部を見ながら値を探すと、どの画面に合わせているのかが分からなくなります。

毎日開くサイトを専用アプリにしたときの暗くし方

適用する画面と適用しない画面を分けたいなら、サイトごとに窓を分ける形が素直です。毎日開くサイトをMacの独立したアプリとして切り出す道具には、拡張機能の扱いが2通りあります。

自前のブラウザエンジンを同梱する方式では、Chromeウェブストアにつながる経路が無いため、この種の拡張機能は入れられません。窓の中を暗くしたい場合、サイト側が暗い配色を持っているかどうかに委ねることになります。

Macにすでに入っているChromium系のブラウザを土台にする方式では、ウェブストアがそのまま手元に残り、アプリごとに拡張機能を有効と無効に切り替えられます。アプリごとにプロファイルが分かれる作りなので、設定も別々に持てます。夜に読む記事のアプリには強めの反転を、図版を見る業務の画面のアプリには何も入れない、という分け方が1回の設定で固定されます。ブラウザの設定を毎回行き来する必要がなくなる点が、この形のいちばんの効きどころです。何ができるかはできることに並んでおり、設定項目の意味は使い方ガイドに1つずつ書かれています。

切り出したあとに残る利点がもう1つあります。ブラウザのタブに並べていると、暗くしたい記事と暗くしたくない管理画面が同じ窓の中に混ざるため、拡張機能の適用外の一覧を育て続けることになります。窓が分かれていれば、その一覧を作る作業そのものが要らなくなります。設定を足して例外を管理するのではなく、置き場所で分ける形です。

道具そのものの見た目をライトとダークと自動から選べるものもあります。Dockに並ぶアイコンと、その中身の配色をそろえておくと、夜に画面を見たときの落差が小さくなります。

決める順番

先に見ると速いのは雛形の一覧です。対応サービス一覧には300以上のプリセットからすぐ作れることが掲げられており、夜に長く開いているサイトがその中に何個あるかを数えると、作る本数の見当が付きます。費用の形は買い切りか継続課金かで総額が変わるので、料金で先に確かめます。判断が割れやすい点はよくある質問に集まっています。

順番は3つです。1つ目に、Chromeの設定とMacのシステム設定をダークにして、それで足りるサイトを外します。ここで満足するなら拡張機能は要りません。2つ目に、残ったサイトの中でいちばん長く見ているものに拡張機能を当て、明るさとコントラストを自分の目に合わせます。3つ目に、図版と地図と業務の画面を適用しない一覧に入れます。

この3つを終えたあとで、設定の行き来が1日に何度も起きているなら、窓を分ける形に移る合図です。適用する画面と適用しない画面が3個以上に分かれてきたら、切り替えではなく分離のほうが手数が少なくなります。