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

スポンサーリンク
Google Chrome

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

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

Chromeのダークモードの説明

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

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

Windows版Chromeを例に説明しますが、Mac版Chromeにも対応しています。

 

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

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

Dark Reader
Dark Reader
開発者: 不明
金額: 無料

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順1

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

▼通常

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順2

通常の当サイト

▼適用後

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順3

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

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順4

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

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

  • 切り替えを自動化する
  • 明るさ等を調整する
  • 特定サイトのみ適用or対象外とする
  • その他

▼切り替えを自動化する

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

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

そのほか、ショートカットキーでオン/オフ切り替える設定もあります。
Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順5

赤枠から設定する

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順6

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順7

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

▼明るさ等を調整する

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順8

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

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

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

サイトリスト 意味
ホワイトリスト 入力したサイトのみ
ダークモードを適用する
ブラックリスト 入力したサイトは
ダークモードを対象外とする
Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順9

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順10

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

▼その他

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

Dark Reader - Chromeの全サイトにダークテーマを強制適用する手順11

赤枠で設定できる

 

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

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

説明の流れ
  • 補足①
    Edge・Firefox・Safari→同じ手順でダークモード適用可能
  • 補足②
    Android版Chrome→非対応のため 代わりに試験機能がオススメ
  • 補足③
    iPhone版Chrome→非対応のため 代わりにSafariがオススメ

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

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

Dark Reader
Dark Reader
開発者: alexanderby
金額: 無料
Dark Reader
Dark Reader
開発者: Dark Reader Ltd
金額: 無料
‎Dark Reader for Safari
‎Dark Reader for Safari
開発者: Dark Reader Ltd
金額: 無料

EdgeのアイコンEdge版・FirefoxのアイコンFirefox版は、ChromeのアイコンChrome版と機能は同じです。

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

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

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

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

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

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

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

chrome://flags

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

Android版Chromeでダークモードを適用する説明1

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

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

Android版Chromeでダークモードを適用する説明2

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

ぜひ、どうぞ。

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

Google Chrome
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

  1. shimo より:

    めちゃくちゃ助かりました!
    ありがとうございました。

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