Chromeをダークモードにする｜サイトの中身まで暗くするやり方

Chromeをダークモードにしたのに、Gmailやドキュメントを開くと画面が白いまま。この食い違いは設定の失敗ではなく、暗くなる範囲がそこまでと決まっているためにおきる。ブラウザの枠とページの中身は別の層で色が決まっていて、どちらを変えたいのかで打つ手が変わる。ここでは4つの道を並べて、どれをどこまで使うかを決められるところまで持っていく。

暗くなる範囲は公式の説明どおりに狭い

Chromeの外観の設定は、新しいタブの右下にある「Chromeをカスタマイズ」から開き、外観の欄でライト・ダーク・デバイスの3つを選ぶ形になっている。Chromeヘルプのダークモードまたはダークテーマでブラウジングするには、暗くなるのはホームページ・ツールバー・設定・その他一部のページだと書かれている。ページの中身はこの一覧に入っていない。

これは不具合ではなく役割の切れ目である。ページの色はそのサイトが決めていて、Chromeは送られてきた色をそのまま描いている。2019年ごろから、サイト側は prefers-color-scheme という指定でOSの設定を読み取れるようになり、この対応をしているサイトはMacをダークにするだけで自動で暗くなる。GmailやGitHubが勝手に暗くなるのはこの仕組みによる。逆に、ダーク用の色を用意していないサイトは、ブラウザの枠がどれだけ暗くても白い。

つまり、枠はChromeの設定、中身はサイトの設計、という2階建てになっている。白い画面に出会ったときは、この境目に着いたということで、次の問いは「中身を上書きするかどうか」になる。

まずMac側の外観設定を確かめる

順番として最初に見るのはChromeではなくMacの設定である。システム設定の外観にライト・ダーク・自動の3つがあり、ここがライトのままだと、prefers-color-scheme に対応しているサイトはすべてライトの色を送り続ける。拡張機能を入れる前に、この1か所で解決する画面がかなりある。

自動を選んだときの挙動には癖がある。AppleのMacユーザガイドは、自動は操作がない状態が1分以上続くまで切り替わらないと説明している。作業の途中で画面の色がいきなり変わることはなく、手が止まったときに切り替わるという設計である。日中は明るい部屋、夜は暗い部屋という人には、片方に固定するより自動のほうが合う。

Chromeの外観をデバイスにしておくと、枠の色もMacの設定に付いてくる。ここまでを揃えてから、残った白い画面が何なのかを数えるほうが早い。対応済みのサイトが暗くなった結果、本当に手当てが必要なサイトは思ったより少ないことが多い。

ページの中身まで暗くする3つの道

残った白い画面を暗くする方法は3つある。効き方も壊れ方も違うので、同じものとして扱わないほうがよい。

1つ目は、そのWebアプリ自身が持つダークテーマである。Gmailは設定のテーマの欄で「ダーク」を選べる。Googleドライブも設定の外観の欄でライト・ダーク・デバイスのデフォルトから選べる。作った側が色を決めているので、仕上がりは他の2つより明らかによい。

2つ目は、Chromeの実験機能である。chrome://flags を開いて dark で検索すると「Auto Dark Mode for Web Contents」という項目が出てくる。説明は「すべてのウェブコンテンツをダークテーマで自動的に描画する」の1行で、内部の名前は enable-force-dark のままになっている。検索すると出てくる「force dark mode for web contents」という古い表記は、この内部名に由来している。

3つ目は拡張機能である。ページの色を読み取って作り替える方式が主流で、ダークテーマを持たないサイトにも効く。Chromeウェブストアで最も知られているものの説明にはこう書かれている。

平均評価: 4.3 つ星（5 つ星が最高）結果とレビューについて、詳しくはこちらをご覧ください。Chromeのダークモードをオンにします。目を大切にし、夜間や日常のブラウジングにダークテーマを使用します。 出典: chromewebstore.google.com

3つの違いを表にすると、どれを選ぶかの判断が付きやすい。

方法	設定する場所	効く範囲	引き換えに払うもの
アプリ自身のダークテーマ	各Webアプリの設定	そのサイトだけ	探す手間。用意がないサイトもある
OSの外観設定	システム設定の外観	OSの設定を読むサイト全部	なし。無視するサイトには効かない
Chromeの実験機能	chrome://flags	ページの中身すべて。例外なし	予告なく消える。サイト別の除外ができない
拡張機能	拡張機能ごとの設定	許可した範囲	広い権限。更新の追従も必要

実験機能を使う前に読んでおくこと

chrome://flags の項目は設定画面の項目とは扱いが違う。ChromeヘルプのChromeフラグについてには、フラグは一時的なもので、予告なく変更・破損・削除されることがあり、設定ではないので動作を恒久的に変えるものではないと書かれている。同じページには、ほとんどの利用者は変更する必要がなく、ブラウザのデータを失ったり、セキュリティやプライバシーを損なうことがあるとも書かれている。

使ってはいけないという話ではない。維持の約束がない機能だという話である。Chromeの更新で項目が消えることがあり、そのときに案内は出ない。毎日の仕事の土台にするなら、この前提を先に知っておく必要がある。

壊れ方には型がある。次の画面では色が意味を持っているので、自動反転と相性が悪い。

• 透過した背景の図やロゴが、暗い背景に黒く沈むか、白い四角として浮く
• グラフの軸や目盛りが要素として反転し、線と文字の見分けが付かなくなる
• すでにダークテーマを持つサイトが二重に暗くされ、明暗の差が潰れる
• 表の条件付き書式、差分の赤と緑、状態を示す色分けが、別の色に置き換わる
• スクリーンショットが手元だけの色になり、相手の画面と一致しない

そして最大の制約は、サイト別の例外を作れないことである。1つのスイッチで数百のサイトを同じ規則に従わせるので、1つでも壊れて困る画面があるなら、この道は選べない。

拡張機能は「サイトごとの制御」で選ぶ

拡張機能の一覧はどれも似た説明文で並んでいる。差が出るのは仕上がりよりも、サイトごとにどこまで制御できるかである。見るべき点は4つに絞れる。

• そのサイトだけオフにでき、再起動後も覚えているか
• 全サイトに当ててから除外するのではなく、許可したサイトだけに当てる方式を選べるか
• 明るさとコントラストをサイトごとに保存できるか
• すでにダークなサイトを検出して、二重に暗くしないか

権限の見方も決めておく。ページの色を作り替える拡張機能は、訪れたサイトのデータを読み取って変更する権限を必要とする。背景色を書き換える権限は、入力欄を読む権限と同じものである。使えないという意味ではなく、機能ではなく公開元を見て決める話になるという意味である。ストアの掲載ページにあるプライバシーの欄、最終更新日、バージョン、ソースコードが公開されているかを見れば判断材料になる。よく使われているものは、利用者700万人、評価4.7、13.2万件の評価という規模で、これは監査ではないが、目が多く入っているという事実にはなる。

値段の形も確かめておく。無料で機能に制限がないもの、無料の範囲を5サイトまでに絞って年額9ドルから解除するもの、Safari向けだけ有料のものが混在している。無料の枠はサイト数やブラウザ数で切られていることが多く、仕事用と個人用でプロファイルを分けている人は、その数を先に数えたほうがよい。

「目に優しい」は条件付きである

ダークモードを目のためと説明する記事は多いが、読みやすさの研究はもっと狭いことを言っている。明るい部屋では瞳孔が絞られ、ピントが合いやすくなるため、視力に問題のない人は明るい背景のほうが読み取りの成績が良い傾向がある。一方、水晶体が濁っている場合は入ってくる光が少ないほうが読みやすいことがあり、乱視が矯正されていない人は、暗い背景に白い文字が滲んで見えることがある。

色の組み合わせのほうが、明暗の向きより効く。Webアクセシビリティの指針では、本文の文字と背景の明暗の比を4.5対1以上にすることが基準になっている。ダークテーマが読みにくくなるのはこの基準を割ったときで、暗い灰色の面に中間の灰色の文字を置いた補助テキストが最初に潰れる。逆に、真っ黒の背景に純白の文字は明暗の差が最大になるが、文字の輪郭が滲んで長文には向かない。よくできたダークテーマが黒に寄せすぎず、白にも寄せすぎないのはこのためである。

部屋の明るさと画面の輝度も同じくらい効く。夜に画面がまぶしいという症状に対しては、輝度を部屋に合わせるほうが先で、色を反転させるのは次の手である。

30分で決着させる確かめ方

掲載ページを読み比べても差は分からない。どの方法にするかは、毎日開く画面に当ててみれば決まる。順番を決めておくと30分で終わる。

最初に、仕事で開く数を数える。メール、チャット、書類、進捗を見る画面、社内だけで使っている道具の5つを並べ、この5つだけで判定する。記事や検索結果の見た目で決めると、あとで書類の画面が壊れて作り直しになる。

次に、各アプリの設定を開いてダークテーマがあるかを見る。あるものはそこで終わりにして、残った数を数える。この時点で残りが1つか2つなら、全サイトに当てる方法は割に合わない。

残った画面に実験機能を当てて、4点だけ見る。補助的な小さい文字が読めるか、色で意味を示している箇所が別の色に変わっていないか、更新が多い画面で暗くなる前に一瞬白く光らないか、元の見た目にすぐ戻せるか。ここで落ちた画面は拡張機能でも同じところで落ちることが多い。

最後に、無料の枠に収まるかを確かめる。ブラウザの数やサイトの数で区切られている製品があるため、仕事用と個人用でプロファイルを分けている人は、その数を先に数えておく。

画面ごとに答えが違うなら、窓ごとに決める

ここまでの内容は、1つの結論に集まる。正しい見た目はアプリごとに違う。メールは暗いほうが読みやすく、書類の面は印刷に出る色を保ったほうが安全で、図を扱う画面は作った人が決めた色でなければ判断を誤る。全サイトに1つの規則を当てる発想は、すべてのアプリが同じタブとして並んでいるという前提から来ている。

アプリごとに窓を分けると、設定の置き場所が変わる。アプリごとに独立したワークスペースにしておけば、見た目はそのアプリ自身のダークテーマで決められる。反転で作った色ではなく、作った側が選んだ色が出るので、仕上がりは自動の推測より確実である。窓を1つずつ立てて、どの窓にどのサービスを置くかを決める作り方はできることにまとめてある。文脈ごとに窓の組を切り替える考え方はワークスペースで、朝の執筆と夜の読み物で見た目の組を分けられる。

毎日使うサービスにダークテーマが用意されているかは、先に確かめておくと無駄が減る。対応しているサービスの一覧は使えるアプリにある。既に同じ目的の道具を使っている場合の違いはWaveboxとの比較で、料金の考え方は料金に置いてある。導入の前に細かい点を確かめたいときはよくある質問を見ると早い。

古い社内ツールや、10年前から手が入っていない資料サイトのように、ダークテーマが今後も用意されない画面は残る。そこだけ拡張機能に任せて、毎日使う数個のサービスは各アプリの設定で決める。これが、1つのスイッチで全部を変えるより手戻りの少ない形になる。