Safariには、ダークモードに対応していないWebサイトまで強制的に黒くする機能は見当たりませんでした。
ただ、近い状態にする方法はあります。Safari用の拡張機能アプリを1つ追加してオンにするだけで、非対応サイトも含めてほぼ黒い画面に変わります。
一番早いのは「Noir – Dark Mode for Safari」という拡張機能アプリを入れる方法でした。手順は次の3つです。
- App Storeで「Noir」をインストールする
- 設定→アプリ→Safari→機能拡張でNoirの「機能拡張を許可」をオンにする
- Safariのアドレスバー左のアイコン→機能拡張を管理からNoirを有効化する
これで、ほとんどのサイトは強制的にダーク表示になります。
ただし、サイトがもともとダークモードに対応している場合や、拡張機能側の除外リストに入っている場合は、この設定だけでは変わりません。
ただ、この方法だけでは終わりません。一部のサイトだけ妙に色が浮いて見える、という落とし穴が1つありました。
ここからは、なぜSafari本体では対応できないのか、そして実際にNoirを試して何が変わり、何が変わらなかったのかを整理していきます。
Safari本体だけでは強制ダークモードにできない
Apple公式サポートを確認した範囲でも、Safari単体で「非対応サイトを強制的に黒くする」設定・トグルは見つかりませんでした。
iPhoneの外観をダークモードにすると、対応しているサイトは自動で黒くなります。ただしこれは、サイト側が「prefers-color-scheme」という仕組みに対応している場合だけの話です。
本体のダークモードとサイト側の対応は別物、というイメージです。
たとえるなら、本体のダークモードは部屋の照明のスイッチで、サイト側の対応は壁紙の色のようなものです。照明を落としても、壁紙が白いままなら部屋全体は結局明るく見えます。
Safariが持っているのは「照明のスイッチ」までで、「壁紙そのものを塗り替える」機能は本体には無い、ということになります。
なんだこれ、と思いましたが、仕組みを知ってしまえば納得はできました。
拡張機能アプリ「Noir」を追加してオンにする手順
壁紙側を塗り替える役割を担うのが、今回のようなSafari用の拡張機能アプリです。
リサーチした範囲で実在が確認できたのは、Noir、Dark Reader for Safari、Makeover – Custom CSSの3つでした。中でもNoirは価格・手軽さのバランスがよく、今回はこれを軸に手順を紹介します。
正直に言うと、最初は無料で済ませようとしていました。
無料をうたう拡張機能アプリも何個か試しましたが、実際は数日だけの「お試し期間」で、過ぎると「課金してください」という表示が毎回出てくるものばかりでした。
消すの忘れているとかなり鬱陶しい。
結局、期限切れの案内を消す手間の方が面倒になり、¥400を払ってNoirに切り替えました。買い切りで一度払えばそれで終わり、という気楽さは、使ってみると想像以上に大きかったです。
- App Storeで「Noir – Dark Mode for Safari」を検索してインストールする（買い切り、執筆時点で数百円程度。価格は変動するため購入前にApp Storeで確認してください）
- 設定→アプリ→Safariと進み、「機能拡張」の項目を開く
- 機能拡張の一覧からNoirをタップする
- Noirの詳細画面で「機能拡張を許可」をオンにし、「すべてのWebサイト」を「許可」にする
- Safariに戻り、アドレスバー左のアイコンをタップして「機能拡張を管理」にNoirが出てくるか確認する
許可項目を1つ飛ばすと動かない
ここ、地味に迷う場所でした。
Noirの詳細画面には「機能拡張を許可」と「すべてのWebサイト」という2つの許可項目があります。片方だけオンにして満足してしまいがちですが、両方オンにしないとNoirは動きません。
正直、ここで一度つまずきました。片方だけオンにしたのに何も変わらず、しばらく画面を見つめる時間ができてしまいました。
Noir、Dark Reader、Makeoverいずれも、対応OSはiOS 15.0以降です。かなり前のiOS・機種のままだと、そもそも機能拡張自体が使えない可能性があります。
実際に非対応サイトを開いて検証した結果
Noirをオンにした状態で、普段ダークモードに対応していないと感じていたサイトをいくつか開いてみました。
Safariのアドレスバー左のアイコンからNoirをタップすると、そのサイト専用の設定ポップアップが開きます。「Enabled」が「Default (Auto)」になっていれば、あとは待つだけです。
切り替えた瞬間、画面がすっと暗く落ち着いて、目への刺さり方が明らかに変わりました。
文字もちゃんと読める濃さで表示されていて、単に色を反転させただけの雑な仕上がりではありませんでした。これならできそう、という手応えがありました。
一方で、数サイトほど、背景は黒くなったのにボタンの一部だけ元の色のまま浮いて見えるケースもありました。
完全には消えない違和感。
とはいえ、大半のサイトは違和感なく馴染んでいて、思ったより実用的な仕上がりだと感じました。
黒くならないサイトがあるときの対処法
冒頭で少し触れた、もう一つの注意点がここです。
Dark Reader公式のヘルプを確認したところ、拡張機能がうまく効かない原因として、主に次の3つが挙げられていました。
- 拡張機能自体がオフになっている
- そのサイトが除外リスト（非反転リスト）に登録されている
- 他のダークモード系拡張機能と競合している
まずは機能拡張を管理する画面で、対象の拡張機能が確実にオンになっているか確認するのが最初の一歩です。
実際、検証中に1サイトだけ黒くならないことがありました。開いてみると、Noirから「このサイトでは明日まで無効になっています」というメッセージが出ていました。以前どこかで「今日はオフ」を選んだことを、すっかり忘れていたんです。
知らないうちに自分で止めていた、というオチでした。表示されているボタンを押せばその場で再度有効にできます。
それでも黒くならない場合は、拡張機能アプリ側の設定で、そのサイトが除外リストに入っていないか見直してみてください。
なお、サイト自体がもともとダークモードに対応している場合、拡張機能を重ねて適用すると配色がかえっておかしくなる、という情報もありました。断定はできませんが、妙に浮いて見えるサイトに当たったら、そのサイトがすでにダーク対応済みかどうかを疑ってみる価値はありそうです。
Dark ReaderやMakeoverとの違い
Noir以外の選択肢も、簡単に触れておきます。
Dark Reader for Safariは、明るさやコントラストを細かく調整できるのが特徴です。価格はNoirよりやや高めですが、サイトごとに有効・無効を切り替えられるなど、カスタマイズ性を重視する人向けでした。
Makeover – Custom CSSは無料で使えますが、自分でCSSを書いて見た目を作り込む前提のアプリで、初心者がそのまま使うにはやや上級者向けという印象です。
知ってる方がレアだ、と言いたくなるくらい、この3つのアプリの存在自体がまだあまり知られていない気がしています。
使う前に知っておきたい注意点
設定アプリの中でSafariの機能拡張を探すとき、メニューの並びがiOSバージョンによって変わっている可能性があります。
この記事では「設定→アプリ→Safari→機能拡張」の並びで案内していますが、iOSのバージョンによっては「設定→Safari→機能拡張」のように、一段浅い階層になっている場合もあります。見当たらないときは、設定アプリ内の検索欄で「機能拡張」と検索するのが早いです。
そもそもこの手の「本体側には無い気配りを、外部アプリが埋める」という構造は、Safariに限った話ではない気がします。
標準機能だけで完結させようとせず、必要な分だけ拡張機能に頼る、という付き合い方が一番ストレスが少ないように思いました。
よくある質問
無料で試せる方法はある？
Makeover – Custom CSSは無料で使えますが、CSSを自分で書く前提のアプリです。手軽さを優先するなら、有料でもNoirのような専用アプリの方が結果的に迷いは少ないと思います。
拡張機能を入れるとSafariが重くなる？
今回試した範囲では、体感できるほどの重さは感じませんでした。ページを開くたびに一瞬だけ表示が切り替わる、という程度でした。
元に戻したい場合はどうする？
設定→アプリ→Safari→機能拡張から、該当の拡張機能のスイッチをオフにするだけで元の表示に戻ります。アプリ自体を削除する必要はありません。
Safari本体だけでは完結しない仕様だからこそ、こういう小さな拡張機能の存在がありがたく感じられます。
まずは1つ、気になったアプリを試してみるところから始めてみてください。
コメント