当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

Vivaldi、Chrome、Edge、Windowsをダークモードにする方法

2021年9月7日豆知識系

Windows11のアイコン

この記事では、4つのブラウザ(Google ChromeVivaldiMicrosoft EdgeFloorp)とWindows10、Windows11でダークモードにする方法を紹介します。

Google Chrome、Vivaldi、Edgeブラウザでダークモードにしてみた画像

ダークモードとは、ベースの部分を、黒系統の色にした外観のことです。背景色が黒になり、文字が白になります。ライトモードでは、背景が白、文字が黒です。

真っ黒というわけではなく、黒に近い灰色など、アプリや設定によって、色は異なります。明確な境界線はなく、メイン部分が、黒に近かったら、ダークモードに分類されると思います。

「Vivaldi(ヴィヴァルディ)」、「Google Chrome」、「Microsoft Edge」、「Floorp(Firefoxベース)」などの各ブラウザは、それぞれダークモードに対応しています。

標準でダークテーマが適用できる場合と、テーマの拡張機能を導入する必要がある場合に分かれます。どちらにせよ、初心者でもできると思います。

Windowsにもダークモードが存在しており、数回のクリックで、ささっとダークモードにできます。具体的には、エクスプローラー、スタートメニューなどの背景が黒になります。Windows10、Windows11どちらもできます。

本記事では、それぞれのブラウザ、Windows全体をダークモードにする方法を、自分が忘れないよう書きます。黒を基調とした外観にすることで、目の疲労を軽減できる…と思っています。調べてみたんですが、どうやら学的な根拠はないようです。(参考

僕は、ブログを始めた2021年5月頃までは、ライトテーマを利用していました。ブログと向き合う時間が増えてからは、ダークテーマにしています。

Googleトップページのライトモードとダークモードの比較画像

各種ブラウザでダークモードにする方法

ブラウザごとで、設定方法が異なります。自分のブラウザに合わせて、参考にしてみてください。

ChromeのアイコンGoogle Chrome(グーグル・クローム)

OSのシステムテーマを変えることで自動的に変化する

「Google Chrome」の場合、初期でOSシステムのテーマカラーに合わせて、ベースの色が変わるようになっています。

Windows11の場合、設定→個人用設定→「テーマ」をクリックします。ダークモードに対応したテーマをクリックします。Windows全体がダークモードになり、さらに「Google Chrome」もダークモードになります。

「Google Chrome」でOSのテーマに応じてモードを切り替えている画像

Chromeのテーマカラーをデフォルト・あるいは黒にする

もし、変わらない場合は、Chrome上のテーマカラーをデフォルト・あるいは黒以外にしている可能性があります。Chromeを起動して、アドレスバーに「chrome://settings/manageProfile」と貼り付けて移動します。

chrome://settings/manageProfile

「テーマカラーを選択」を「デフォルト色」、あるいは「黒」にします。

「Google Chrome」でテーマカラーを変更する手順画像

テーマを導入してダークモードにする

Chromeには、テーマストアがあります。ダークモードのテーマをインストールすることで、ダークモードにできます。

Chromeを起動します。

「Google Chrome」をライトモードにした画像

起動したら、テーマストアにアクセスします。

【ポイント】設定からアクセスする方法

Chromeの設定からでもアクセスできます。右上のケバブメニュー→「設定」をクリックします。

「Google Chrome」で設定からChromeウェブストアのテーマストアを開く手順画像1

デザインをクリックして、「テーマ」をクリックします。

「Google Chrome」で設定からChromeウェブストアのテーマストアを開く手順画像2

黒系のテーマが表示されるので、好きなテーマを選択します。今回は、「Material Theme Dark [blue-grey]」にしてみます。

「Google Chrome」にダークテーマを適用する手順画像1

「Chromeに追加」をクリックします。

「Google Chrome」にダークテーマを適用する手順画像2

「テーマ〇〇をインストールしました」と表示されればOKです。インストールしたテーマになります。

「Google Chrome」にダークテーマを適用する手順画像3

注意点ですが、テーマはタブやホームのみの適用で、ウェブサイトには反映されません。

「Google Chrome」をダークモードにして、当サイトにアクセスした画像

Googleの検索結果をダークにしたい場合は、こちらを参考にしてみてください。Google上でダークモードにできます。

Googleの検索結果以外のウェブサイトをダークモードにしたい場合は、Chrome拡張機能の「Dark Reader(ダーク・リーダー)」がおすすめです。ワンクリックでオンオフ切り替え、個別ページごとにブラック・ホワイトリストの登録などができます。

VivaldiのアイコンVivaldi(ヴィヴァルディ)

Vivaldi(ヴィヴァルディ)」は、標準でダークテーマが備わっています。Chromeと同様、テーマストアもあります。Vivaldiテーマストアからインストールする方法は、下記記事にて詳しく書いています。

標準で内蔵しているダークテーマに変更したい場合、画面左上のVivaldiアイコン→「設定」をクリックします。Ctrl+F12でも開けます。

Vivaldiブラウザで設定を開く手順画像

左側のメニューから、「テーマ」をクリックします。ライブラリー内の中から、ダークテーマをクリックします。「Dark」、「I ssuna」、「Blueprint」などです。

Vivaldiブラウザを、ダークモードにする手順画像1

タブバー、設定などのダイアログ、アドレスバー・ブックマークバーなどのツールバー、スタートページの背景画像などがダークモードになります。

Vivaldiブラウザを、ダークモードにする手順画像2

Chromeと同様で、ウェブページに対しては反映されません。ウェブサイトもダークにしたい場合は、Chrome拡張機能「Dark Reader(ダーク・リーダー)」を利用します。

合わせて読みたい

Vivaldiテーマストアから、無料で入手できるおすすめダークテーマについて、以下の記事に書いています。気になった方は、参考にしてみてください。ほぼ僕が作成したダークテーマの宣伝です。

ダークブルー系だと、「Starry Skies of Japan」とかがおすすめです。

Vivaldiブラウザの「Starry Skies of Japan」のテーマ

Microsoft EdgeのアイコンMicrosoft Edge

「Microsoft Edge」を起動します。画面右上のケバブメニュー(三点ボタン)→「設定」をクリックします。

「Microsoft Edge」をダークモードにする手順画像1

左側のメニューから「外観」をクリックします。全体的な外観か、タブのみの色を変更できます。今回は全体的にダークテーマにするため、「全体的な外観」のダークをクリックします。

「Microsoft Edge」をダークモードにする手順画像2

「Microsoft Edge」上で、ダークモードになります。

「Microsoft Edge」をダークモードにする手順画像3

FloorpのアイコンFloorp(Firefox)

本記事で紹介するブラウザの中で、最も最近新しいブラウザ「Floorp(フロープ)」でのダークモード方法も書きます。Firefoxベースのブラウザなので、Firefoxを利用している方だと、既に知っているかもしれません。

起動して、右上の三点ボタン・三本線ボタンをクリック→「アドオンとテーマ(Ctrl+Shift+A)」をクリックします。

Floorp(フロープ)ブラウザをダークモードにする手順画像1

アドレスバーに「about:addons」と貼り付けてもOKです。

デフォルトでは、拡張機能ページになっているので、左側サイドバーから「テーマ」ページに切り替えます。ダークテーマの「有効化」をクリックします。Floorpの場合は、「マテリアルダーク」という名称になっています。

Floorp(フロープ)ブラウザをダークモードにする手順画像2

ブラウザの外観がダークモードになります。

Floorp(フロープ)ブラウザをダークモードにする手順画像3

GoogleのアイコンGoogleの検索結果

Googleの検索結果ページもダークモードにできます。「Chrome」や「Vivaldi」など、ブラウザとは関係なしに設定できます。

好きなブラウザで、Googleにアクセスします。適当な単語で検索します。検索結果ページが開ければ、どんな単語でもOKです。(例:ナポリタン寿司

右上の設定ボタン(⚙)をクリックします。

Google検索結果ページをダークモードにする手順画像1

右側からクイック設定パネルが表示されます。外観を「ダークモード」に設定します。

Google検索結果ページをダークモードにする手順画像2

Googleの検索結果がダークモードになります。

Google検索結果ページをダークモードにする手順画像3

変更しない限りは、別単語で検索、別タブ・別ウィンドウで開いてもテーマを維持してくれます。ダークモードから元のライトモードに戻すには、同じ手順で外観を「ライトモード」、または「デバイスのデフォルト」に設定します。

Windowsをダークモードにする方法

本記事では、Windows10、Windows11の両方を紹介します。筆者は現在Windows10の環境が手元にないため、アップデートなどで方法が変わっていたらすみません。

Windows10でダークモードにする方法

タスクバーのスタートボタンを左クリックします。「設定」をクリックします。

Windows10をダークモードにする手順画像1

左側のメニューの「色」をクリックします。「色を選択する」の部分を、ライトからダークに変更します。

Windows10をダークモードにする手順画像2

ダークモードになります。

Windows10をダークモードにする手順画像3

エクスプローラーもダークモードになります。

Windows10のエクスプローラーをダークモードにした画像

Windows11でダークモードにする方法

Windows11の設定を開きます。スタートボタンを右クリック→「設定」をクリックするか、キーボードのWindows+Iで起動できます。

Windows11をダークモードにする手順画像1

左側メニューの中から「個人用設定」を選択します。「テーマを選択して適用する」の部分に表示されているテーマの中から、ダークっぽいテーマ(Windows11の青のダークテーマとかWindows11のポテトチップスのダークテーマ)を選択します。

Windows11をダークモードにする手順画像2

エクスプローラー、設定、スタートメニュー、タスクバーなどがダークモードになります。

Windows11をダークモードにする手順画像3
【ポイント】個別に設定

設定・エクスプローラーはライトモード、スタートメニュー・タスクバーはダークモード…といったように、個別で設定することもできます。

個人用設定→「色」をクリックします。

Windows11でWindowsモードとアプリモードでテーマを変更する手順画像1

「モードを選ぶ」を、カスタムにします。

Windows11でWindowsモードとアプリモードでテーマを変更する手順画像2

Windows モード、アプリモードで個別にライト・ダークを設定できるようになります。

Windows11でWindowsモードとアプリモードでテーマを変更する手順画像3

例えば、「規定のWindowsモード」をライト、「既定のアプリモード」をダークにした場合、スタートメニューはライト、設定やエクスプローラーはダークになります。

Windows11でWindowsモードとアプリモードでテーマを変更する手順画像4

感想

以上、「Google Chrome」、「Vivaldi」、「Microsoft Edge」、「Floorp」などのブラウザをダークモードにする方法、及びWindows全体をダークモードにする方法でした。

「ダークモードを一度も試したことがない!」という方に、おすすめしたいです。僕はダークモードの存在を知って衝撃でした。なんか目に優しい気がします。

2021年9月7日豆知識系

Posted by ナポリタン寿司