Android版Chromeでダークモードを使う方法! スマホですべてのサイトをナイトモードへ切り替えよう

スポンサーリンク
Android

Warning: Undefined array key 3 in /home/truni7/sp7pc.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 511

Warning: Undefined array key 5 in /home/truni7/sp7pc.com/public_html/wp-content/themes/cocoon-child-master/functions.php on line 521

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

試験機能(//flags設定)を使えば、ページ内のコンテンツ含め、すべて黒基調のデザインに変化できますよ。

Android版Chromeのダークモードの説明

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

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

Chromeバージョン115で検証しています。

 

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

スマホのChromeにダークテーマを適用する方法

ChromeアプリのアイコンChromeには標準でダークテーマが用意されており、ツールバーや設定メニューが黒基調のデザインへ変化します。

Chrome標準のダークテーマ機能の説明

Chromeメニューの設定→テーマより切り替えできる。

ただページ内のコンテンツは、サイト側で個別対応していないかぎり、従来の明るい背景のまま表示される仕様となっています。

Chrome標準機能でダークテーマを有効にしても変化がほぼないサイトの説明

当サイトの例。通常時(左)と比較して、ダークテーマを有効にしてもサイトコンテンツに変化はない(右)。

ここで試験機能(//flags設定)を使えば、サイトコンテンツ含めページ全体にダークテーマを強制適用できます。

【試験機能とは?】 – Chromeに標準搭載される前の実験的な機能のこと。少し不安定だが、通常では使えない最新機能を試すことができる。

ChromeアプリのアイコンChromeのアドレスバーに下記を入力して、試験機能を開きます。

chrome://flags
スマホのChromeにダークテーマを適用する手順1

(左)chrome://flagsと入力 (右)試験機能ページが開く

検索窓で「dark」と入力して、Auto Dark Mode for Web Contents を選択、Enabled へ切り替えます。

Chromeバージョンによっては、Force Dark Mode for Web Contents と表示される場合があります。
スマホのChromeにダークテーマを適用する手順2

(左)①darkと検索→②赤枠よりプルダウンメニューを開く (右) Enabledを選択

RelaunchChromeアプリのアイコンChromeを再起動します。

サイトコンテンツの中身含め、ページ全体が黒を基調としたデザインへ変化すれば成功です。

スマホのChromeにダークテーマを適用する手順3

(左)Relaunchで自動再起動する (右)ダークモードが適用される

スマホのChromeにダークテーマを適用する手順4

当サイトの例。通常のダークテーマ(左)と比較して、試験機能によりサイトコンテンツにまで効果がおよぶ(右)。

元に戻したい場合、試験機能より Auto Dark Mode for Web Contents を元の Default へ切り替えればOKです。

スマホのChromeにダークテーマを適用する手順5

Defaultを選択して(左)、Relaunchする(右)。

 

補足:iPhoneやパソコンのブラウザをダークモードにする方法

Android以外のデバイス(iPhone/パソコン)の対応状況を補足します。

説明の流れ
  • 補足①
    iPhone版Chrome→非対応のため 代わりにSafariがオススメ
  • 補足②
    パソコン版Chrome→同じ手順でダークモード適用可能

iPhone版Chrome→非対応のため 代わりにSafariがオススメ

iPhone版Chromeにも試験機能(//flags設定)は存在するものの、今回の試験機能(Auto Dark Mode for Web Contents)は適用できません。

代わりにSafariのアイコンSafariの機能拡張を使った方法がオススメです。

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

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

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

詳しい説明は、関連記事【iPhone版Safariでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう】で解説しています。

iPhone版Safariでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう
この記事では、iPhoneやiPadのSafariでダークテーマを適用する方法を解説します。拡張機能を使えば、全サイトの背景を黒基調のカラーへ変更できます。

パソコン版Chrome→同じ手順でダークモード適用可能

Windows・Macのパソコン版Chromeでも、今回の試験機能(Auto Dark Mode for Web Contents)は適用できます。

パソコン版Chromeでダークモードを適用する説明1

適用手順はAndroid版と同じ。

ただパソコン版なら、もっと便利なChrome拡張機能Dark ReaderのアイコンDark Readerを導入できるため、こちらの方がオススメです。

パソコン版Chromeでダークモードを適用する説明2

切り替えを自動化できるので、使い勝手がよい。

詳しい説明は、関連記事【パソコン版Chromeでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう】で解説しています。

パソコン版Chromeでダークモードを使う方法! 拡張機能ですべてのサイトをナイトモードへ切り替えよう
この記事では、PCのChromeでダークテーマを適用する方法を解説します。拡張機能を使えば、全サイトの背景を黒基調のカラーへ変更できます。

 

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

以上、Android版Chromeでダークモードを使う方法! スマホですべてのサイトをナイトモードへ切り替えよう の説明でした。

試験機能(//flags設定)を使えば、強制的に黒基調のデザインに変化できるので、夜間にブラウジングする機会が多いならオススメです。

ぜひ、お試しあれ。

参考 Google Chromeヘルプ – ダークモードまたはダークテーマでブラウジングする

関連記事 Android版Chromeのオススメ試験機能まとめ

関連記事 Androidでダークテーマを設定する方法まとめ

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

コメント

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