この記事では、iPhone/iPadの標準ブラウザ
Safariで、ダークモードを適用する方法を紹介します。
機能拡張Dark Reader for Safariを導入すれば、ページ内のコンテンツ含め、すべて黒基調のデザインに変化できますよ。
(左)通常の当サイト (右)ダークモードを適用した当サイト
ダークモードに対応していないサイトも、強制的に適用可能です。
Dark Reader – iPhoneのSafariにダークテーマを適用する方法
初期設定として、拡張機能の有効化が求められます。
設定アプリで Safari → 機能拡張 → Dark Reader と進み、有効にします。
設定アプリで「Safari」→「機能拡張」と進む。
(左)Dark Readerを選択 (右)上段で機能を有効化、下段ですべてのWebサイトを許可する
さっそくSafariを開いてみましょう。
どのWebサイトも、背景がすべて黒になっています。
(左)通常の当サイト (右)ダークモードを適用した当サイト
検索フィールド左側「ぁあ」の 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標準機能としてダークモードは存在しますが、ブラウザ上ではサイト側で個別対応していないかぎり、従来の明るい背景のまま表示される仕様となっています。
そこで今回紹介したDark Reader for Safariを使えば、強制的に黒基調のデザインに変化できるので、夜間にブラウジングする機会が多いならオススメです。
なお本アプリはMacでも提供されるため、Macユーザーの方は合わせてどうぞ（使い方は関連記事で解説）。
コメント