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

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

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

ダークモードを適用したYahooトップページ

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

Dark Reader – Chromeの全サイトにダークテーマを強制適用する方法

Download QR-Code

Dark Reader - Chrome Web Store

開発者: 不明

金額: 無料

Dark Readerをインストールします。

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

▼通常

通常の当サイト

▼適用後

ダークモードを適用した当サイト

拡張機能のメニューより、設定変更できます。

①拡張機能を開く→②Dark Readerを選択

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

▼切り替えを自動化する

Dark Readerのオン/オフを自動化できます。

例えば システムの色のモードに従う を有効にすれば、Windows/Mac標準のダークモードと連動して切り替え可能です。

赤枠から設定する

Windowsの例。設定の「個人用設定」→「モードを選ぶ」で、ダークモードへ切り替えできる。

Macの例。システム設定の「外観」→「外観モード」で、ダークモードへ切り替えできる。

▼明るさ等を調整する

ダークモード中の輝度やコントラスト、セピア、グレースケールを調整できます。

赤枠のスライダを左右に動かす

▼特定サイトのみ適用or対象外とする

あるサイトだけ設定を変えたい場合、サイトリストが便利です。

ホワイトリストを設定した例

ホワイトリストにあるYahooトップページは、ダークモードが適用される例

▼その他

ダークモード中の文字フォント・縁取りなど、調整できます。

赤枠で設定できる

補足：その他のブラウザ・スマホをダークモードにする方法

パソコン版Chrome以外の対応状況を補足します。

Edge・Firefox・Safari→同じ手順でダークモード適用可能

パソコンの場合、Chrome以外のブラウザでも、Dark Readerは提供されます。

Download QR-Code

Dark Reader

開発者: alexanderby

金額: 無料

Download QR-Code

Dark Reader

開発者: Dark Reader Ltd

金額: 無料

Download QR-Code

‎Dark Reader for Safari

開発者: Dark Reader Ltd

金額: 無料

Edge版・Firefox版は、Chrome版と機能は同じです。

一方、Macユーザー向けのSafari版は有料となり、機能も一部異なります。

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

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

この記事では、MacのSafariでダークテーマを適用する方法を解説します。拡張機能を使えば、全サイトの背景を黒基調のカラーへ変更できます。

sp7pc.com

Android版Chrome→非対応のため 代わりに試験機能がオススメ

Android版Chromeは、拡張機能に対応していません。

代わりに試験機能（//flags設定）を使った方法がオススメです。

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

chrome://flags

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

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

これでページ内のコンテンツ含め、すべて黒基調のデザインに変化できますよ。

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

詳しくは、関連記事【Android版Chromeでダークモードを使う方法! スマホですべてのサイトをナイトモードへ切り替えよう】で解説しています。

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

この記事では、AndroidのChromeでダークテーマを適用する方法を解説します。試験機能を使えば、全サイトの背景を黒基調のカラーへ変更できます。

sp7pc.com

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

iPhone版Chromeの場合、拡張機能・試験機能どちらの方法も対応していません。

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

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

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

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

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

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

sp7pc.com

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

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

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

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

ぜひ、どうぞ。

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