この記事では、iPhone/iPadのSafariの全サイトで、ダークモードを強制適用する方法を2パターン紹介します。
- CSSをカスタマイズしてダークモードにする(無料)
- 機能拡張Dark Readerでダークモードにする(有料)
通常、ダークモードをオンにすると背景が黒系統になりますが、サイト側が対応していないと変化しません（背景は白系統のまま）。
そういったダークモードに対応していないサイト含め、すべて黒基調のデザインに変化できますよ。
(左)通常の当サイト。ダークモードをオンにしても非対応のため、背景は白系統のまま (右)ダークモードを強制適用した当サイト。背景は黒系統に変化する
関連記事 Android版Chromeでダークモードを強制適用する方法
関連記事 PC版Chromeでダークモードを強制適用する方法
関連記事 Mac版Safariでダークモードを強制適用する方法
Makeover – カスタムCSSでSafariをダークモードにする
Makeoverという機能拡張を使います（無料）。
Safariを開き、検索フィールド左側 アイコンの 機能拡張を管理 →Makeoverをオンにします。
前のページに戻り、Makeover へ進みます。
(左)赤枠をタップ (右)機能拡張を管理
(左)Makeoverをオン (右)Makeoverを開く
初回のみ、アクセス権に関するメッセージが出るので、すべてのWebサイトで常に許可 しましょう。
(左)常に許可 (右)すべてのWebサイトで常に許可
以上で準備は整いました。
あとはダークモードを適用したいページを表示した状態で Makeover を開き、以下コードを登録します。
@media (prefers-color-scheme: dark) {
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
}
CSS Codeの欄に(左)、コードをコピペする(右)
これで端末全体の外観モードが「ダークモード」になってるとき、ダークモードに対応していないサイトであっても、CSSを設定したページであればダークモードが適用されます。
設定アプリの 画面表示と明るさ で確認できます。(左)通常の当サイト (右)ダークモードを適用した当サイト
端末全体の外観モードは、設定アプリの画面表示と明るさ(左) → 赤枠の外観モードでセットできる(右)
もし端末全体の外観モードに関わらず、常にCSSを設定したページにダークモードを適用したい場合、Makeover で以下コードを登録してください。
html {
filter: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) !important;
background-color: #111 !important;
}
img,
video,
picture,
canvas {
filter: invert(1) hue-rotate(180deg) !important;
}
(左)コードをコピペ (右)常にダークモードが適用される
一時的に無効化したい場合、機能拡張を管理 でMakeoverをオフにすればOKです。
(左)機能拡張を管理 (右)オフにする
留意点として、下記のような、もともとダークモードに対応済みサイトで今回のCSSを反映すると、機能が競合してしまい、おかしな表示になってしまいます。
- YouTube
- X(旧Twitter)
- Google検索
あくまでダークモード非対応のサイトに対して、今回のCSSコードを適用するようにしましょう。
YouTubeの例。標準のダークモードに対して(左)、CSSコードを反映すると不自然な表示になる(右)
Dark Reader – 機能拡張でSafariをダークテーマにする
Dark Readerという機能拡張を使います。
初期設定として、拡張機能の有効化が求められます。
設定アプリで Safari → 機能拡張 → Dark Reader と進み、有効にします。
設定アプリで「Safari」→「機能拡張」と進む。
(左)Dark Readerを選択 (右)上段で機能を有効化、下段ですべてのWebサイトを許可する
さっそくSafariを開いてみましょう。
ダークモードに対応していないサイトであっても、背景がすべて黒になっています。
(左)通常の当サイト (右)ダークモードを適用した当サイト
検索フィールド左側「ぁあ」の Dark Reader より、設定変更できます。
(左)①「ぁあ」をタップ→②Dark Reader (右)設定画面
設定は、主に4つあります。
- 切り替えを自動化する
- 特定サイトは対象外とする
- テーマカラーを調整する
- その他
▼切り替えを自動化する
切り替えを Auto にすると、iOS標準のダークモードと連動して、Dark Readerも自動でオン/オフ変化します。
設定アプリの 画面表示と明るさ から変更できます。(左)切り替えをAutoにする (右)ダークモードと連動する
▼特定サイトは対象外とする
表示中サイトURLのチェックを外すと、そのサイトのみ、Dark Readerが無効になります。
(左)当サイトのチェックを外す (右)当サイトではダークモードが適用されない
▼テーマカラーを調整する
Dark Readerをオンにしたとき、適用するカラーを変更できます。
プリセットのカラーとして、16パターン用意されています。
4パターンから選べるほか(左)、+を開くと16パターンすべて表示される(右)。
とある4パターンのカラーを並べた例。
さらに Create your theme より、オリジナルテーマカラーを作成・適用も可能です。
(左)赤枠をタップ (右)背景色と文字色を調整できる
▼その他
Settings を開くと、さらに細かい設定メニューが表示されます。
| メニュー名 | 内容 |
|---|---|
| Enabled by default ※デフォルトはチェックあり |
チェックを外すと、基本は全サイト適用対象外となり、 特定サイトのみ適用対象となる。 |
| Detect dark theme ※デフォルトはチェックなし |
チェックを入れると、サイト側で個別に用意される ダークテーマが優先して適用される。 |
| Darken images ※デフォルトはチェックなし |
チェックを入れると、ページ内画像の輝度も下げる。 |
| Hotkeys | ショートカットキーで切り替え設定をする。 (外付けキーボード使用中のみ) |
(左)赤枠をタップ (右)細かい設定メニューが並ぶ
〆：すべてのサイトをダークモードに切り替えよう!
以上、iPhone版Safariでダークモードを強制適用する方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう の説明でした。
iOS標準機能としてダークモードは存在しますが、ブラウザ上ではサイト側で個別対応していないかぎり、従来の明るい背景のまま表示される仕様となっています。
そこで今回紹介した方法を使えば、強制的に黒基調のデザインに変化できるので、夜間にブラウジングする機会が多いならオススメです。
たとえば以下サイトは、通常ダークモードに対応していませんが、強制適用できますよ。
- Note（https://note.com/）
- 食べログ（https://tabelog.com/）
- 価格.com（https://kakaku.com/）
- Yahoo!知恵袋（https://chiebukuro.yahoo.co.jp/）
- アメーバブログ（https://ameblo.jp/）
お試しあれ。
コメント