iPhone版Safariでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう

スポンサーリンク
iOS

この記事では、iPhone/iPadの標準ブラウザSafariのアイコンSafariで、ダークモードを適用する方法を紹介します。

機能拡張Dark Reader for SafariのアイコンDark Reader for Safariを導入すれば、ページ内のコンテンツ含め、すべて黒基調のデザインに変化できますよ。

Safariでダークモードを適用する説明

(左)通常の当サイト (右)ダークモードを適用した当サイト

ダークモードに対応していないサイトも、強制的に適用可能です。

iPhoneの画面を例に説明しますが、iPadにも対応しています。

 

スポンサーリンク
スポンサーリンク

Dark Reader – iPhoneのSafariにダークテーマを適用する方法

有料アプリです。なお1回購入すれば、iPhone/iPad/Macすべてで利用可能となります。

初期設定として、拡張機能の有効化が求められます。

設定アプリのアイコン設定アプリで Safari機能拡張Dark Reader と進み、有効にします。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順1

設定アプリで「Safari」→「機能拡張」と進む。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順2

(左)Dark Readerを選択 (右)上段で機能を有効化、下段ですべてのWebサイトを許可する

さっそくSafariのアイコンSafariを開いてみましょう。

どのWebサイトも、背景がすべて黒になっています。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順3

(左)通常の当サイト (右)ダークモードを適用した当サイト

検索フィールド左側「ぁあ」の Dark Reader より、設定変更できます。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順4

(左)①「ぁあ」をタップ→②Dark Reader (右)設定画面

設定は、主に4つあります。

  • 切り替えを自動化する
  • 特定サイトは対象外とする
  • テーマカラーを調整する
  • その他

▼切り替えを自動化する

切り替えを Auto にすると、iOS標準のダークモードと連動して、Dark Reader for SafariのアイコンDark Readerも自動でオン/オフ変化します。

ダークモードは、設定アプリのアイコン設定アプリの 画面表示と明るさ から変更できます。
Dark Reader - iPhoneのSafariにダークテーマを適用する手順5

(左)切り替えをAutoにする (右)ダークモードと連動する

▼特定サイトは対象外とする

表示中サイトURLのチェックを外すと、そのサイトのみ、Dark Reader for SafariのアイコンDark Readerが無効になります。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順6

(左)当サイトのチェックを外す (右)当サイトではダークモードが適用されない

▼テーマカラーを調整する

Dark Reader for SafariのアイコンDark Readerをオンにしたとき、適用するカラーを変更できます。

プリセットのカラーとして、16パターン用意されています。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順7

4パターンから選べるほか(左)、+を開くと16パターンすべて表示される(右)。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順8

とある4パターンのカラーを並べた例。

さらに Create your theme より、オリジナルテーマカラーを作成・適用も可能です。

Dark Reader - iPhoneのSafariにダークテーマを適用する手順9

(左)赤枠をタップ (右)背景色と文字色を調整できる

▼その他

Settings を開くと、さらに細かい設定メニューが表示されます。

メニュー名内容
Enabled by default
※デフォルトはチェックあり
チェックを外すと、基本は全サイト適用対象外となり、
特定サイトのみ適用対象となる。
Detect dark theme
※デフォルトはチェックなし
チェックを入れると、サイト側で個別に用意される
ダークテーマが優先して適用される。
Darken images
※デフォルトはチェックなし
チェックを入れると、ページ内画像の輝度も下げる。
Hotkeysショートカットキーで切り替え設定をする。
(外付けキーボード使用中のみ)
Dark Reader - iPhoneのSafariにダークテーマを適用する手順10

(左)赤枠をタップ (右)細かい設定メニューが並ぶ

 

〆:すべてのサイトをダークモードに切り替えよう!

以上、iPhone版Safariでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう の説明でした。

iOS標準機能としてダークモードは存在しますが、ブラウザ上ではサイト側で個別対応していないかぎり、従来の明るい背景のまま表示される仕様となっています。

そこで今回紹介したDark Reader for SafariのアイコンDark Reader for Safariを使えば、強制的に黒基調のデザインに変化できるので、夜間にブラウジングする機会が多いならオススメです。

なお本アプリはMacでも提供されるため、Macユーザーの方は合わせてどうぞ(使い方は関連記事で解説)。

参考 Dark Reader for Safari – 開発者サイト(英語)

参考 Appleサポート – iPhoneやiPadでダークモードを使う

iOS
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
あっとはっく

コメント

タイトルとURLをコピーしました