Vivaldi、Chrome、Edge、Windowsをダークモードにする方法
![Windows11のアイコン画像](https://www.naporitansushi.com/wp-content/uploads/2021/11/windows11-icon-update_01.png)
この記事では、4つのブラウザ(Google Chrome、Vivaldi、Microsoft Edge、Floorp)とWindows10、Windows11でダークモードにする方法を紹介します。
ダークモードとは、ベースの部分を黒系統の色にした外観のことです。背景色が黒になり文字が白になります。ライトモードはその逆で背景が白、文字が黒です。
真っ黒というわけではなく、黒に近い灰色などアプリや設定によって色は異なります。明確な境界線はなく、メイン部分が黒に近かったらダークモードに分類されると思います。
「Vivaldi」、「Google Chrome」、「Microsoft Edge」、「Floorp(Firefoxベース)」などの各ブラウザはそれぞれダークモードに対応しています。
標準でダークテーマが適用できる場合と、テーマの拡張機能を導入する必要がある場合に分かれます。どちらにせよ初心者でもできると思います。
Windowsにもダークモードが存在しており、数回のクリックでささっとダークモードにできます。具体的にはエクスプローラー、スタートメニューなどの背景が黒になります。Windows10、Windows11どちらもできます。
本記事ではそれぞれのブラウザ、Windows全体をダークモードにする方法を自分が忘れないよう書きます。黒を基調とした外観にすることで目の疲労を軽減できる…と思っています。調べてみたんですがどうやら学的な根拠はないようです。(参考)
僕はブログを始めた2021年5月頃まではライトテーマを利用していました。ブログと向き合う時間が増えてからはダークテーマにしています。
![Googleトップページのライトモードとダークモードの比較画像](https://www.naporitansushi.com/wp-content/uploads/2022/02/browser-darkmode_46.png)
各種ブラウザでダークモードにする方法
ブラウザごとで設定方法が異なります。自分のブラウザに合わせて、参考にしてみてください。
Google Chrome
OSのシステムテーマを変えることで自動的に変化する
「Google Chrome」の場合、初期でOSシステムのテーマカラーに合わせて、ベースの色が変わるようになっています。
Windows11の場合、設定→個人用設定→「テーマ」をクリックします。ダークモードに対応したテーマをクリックします。Windows全体がダークモードになり、さらに「Google Chrome」もダークモードになります。
![「Google Chrome」でOSのテーマに応じてモードを切り替えている画像](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_06-1000x577.png)
Chromeのテーマカラーをデフォルト・あるいは黒にする
もし変わらない場合は、Chrome上のテーマカラーをデフォルト・あるいは黒以外にしている可能性があります。Chromeを起動してアドレスバーに「chrome://settings/manageProfile
」と貼り付けて移動します。
chrome://settings/manageProfile
「テーマカラーを選択」を「デフォルト色」、あるいは「黒」にします。
![「Google Chrome」でテーマカラーを変更する手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_07-1000x459.png)
テーマを導入してダークモードにする
Chromeにはテーマストアがあります。ダークモードのテーマをインストールすることでダークモードにできます。Chromeを起動します。
![「Google Chrome」をライトモードにした画像](https://www.naporitansushi.com/wp-content/uploads/2022/02/browser-darkmode_20.png)
起動したらテーマストアにアクセスします。
黒系のテーマが表示されるので好きなテーマを選択します。今回は、「Material Theme Dark [blue-grey]」にしてみます。
![「Google Chrome」にダークテーマを適用する手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_49-1000x580.png)
「Chromeに追加」をクリックします。
![「Google Chrome」にダークテーマを適用する手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_50-1000x583.png)
「テーマ〇〇をインストールしました」と表示されればOKです。インストールしたテーマになります。
![「Google Chrome」にダークテーマを適用する手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_51-1000x514.png)
注意点ですが、テーマはタブやホームのみの適用でウェブサイトには反映されません。
![「Google Chrome」をダークモードにして、当サイトにアクセスした画像](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_14-1000x529.png)
Googleの検索結果をダークにしたい場合は、こちらを参考にしてみてください。Google上でダークモードにできます。
Googleの検索結果以外のウェブサイトをダークモードにしたい場合は、Chrome拡張機能の「Dark Reader」がおすすめです。ワンクリックでオンオフ切り替え、個別ページごとにブラック・ホワイトリストの登録などができます。
Vivaldi
「Vivaldi」は、標準でダークテーマが備わっています。Chromeと同様テーマストアもあります。Vivaldiテーマストアからインストールする方法は下記記事にて詳しく書いています。
標準で内蔵しているダークテーマに変更したい場合、画面左上のVivaldiアイコン→「設定」をクリックします。Ctrl+F12でも開けます。
![「Vivaldi」ブラウザの設定を開く手順画像](https://www.naporitansushi.com/wp-content/uploads/2022/11/vivaldi-setting_93.png)
左側のメニューから「テーマ」をクリックします。ライブラリー内の中からダークテーマをクリックします。「Dark」、「I ssuna」、「Blueprint」などです。
![Vivaldiブラウザを、ダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_08.png)
タブバー、設定などのダイアログ、アドレスバー・ブックマークバーなどのツールバー、スタートページの背景画像などがダークモードになります。
![Vivaldiブラウザを、ダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_09-1000x535.png)
Chromeと同様でウェブページに対しては反映されません。ウェブサイトもダークにしたい場合は、Chrome拡張機能「Dark Reader」を利用したり、バージョン6.6(2024年02月29日公開)から実装されたウェブサイトのダークモードの強制機能を使うといいかなと思います。
![「Vivaldi」のバージョン6.6から実装された機能でウェブサイトをダークモードにする手順画像](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_16.png)
Vivaldiテーマストアから無料で入手できるおすすめダークテーマについて、以下の記事に書いています。気になった方は参考にしてみてください。ほぼ僕が作成したダークテーマの宣伝です。
ダークブルー系だと「Starry Skies of Japan」とかがおすすめです。
![Vivaldiブラウザの「Starry Skies of Japan」のテーマ画像](https://www.naporitansushi.com/wp-content/uploads/2022/02/vivaldi-dark-theme_31.jpg)
Microsoft Edge
「Microsoft Edge」を起動します。画面右上のケバブメニュー(三点ボタン)→「設定」をクリックします。
![「Microsoft Edge」をダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_10.png)
左側のメニューから「外観」をクリックします。全体的な外観かタブのみの色を変更できます。今回は全体的にダークテーマにするため「全体的な外観」のダークをクリックします。
![「Microsoft Edge」をダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_13.png)
「Microsoft Edge」上がダークモードになります。
![「Microsoft Edge」をダークモードにする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_12.png)
Floorp(Firefox)
本記事で紹介するブラウザの中で、最も最近新しいブラウザ「Floorp」でのダークモード方法も書きます。Firefoxベースのブラウザなので、Firefoxを利用している方だと既に知っているかもしれません。
起動して右上の三点ボタン・三本線ボタンをクリック→「アドオンとテーマ(Ctrl+Shift+A)」をクリックします。アドレスバーに「about:addons
」と貼り付けてもOKです。
![Floorp(フロープ)ブラウザをダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_29.png)
デフォルトでは拡張機能ページになっているので、左側サイドバーから「テーマ」ページに切り替えます。ダークテーマの「有効化」をクリックします。
![Floorp(フロープ)ブラウザをダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_52-1000x701.png)
ブラウザの外観がダークモードになります。
![Floorp(フロープ)ブラウザをダークモードにする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/04/browser-darkmode_53-1000x500.jpg)
Googleの検索結果
Googleの検索結果ページもダークモードにできます。「Chrome」や「Vivaldi」などのブラウザとは関係なしに設定できます。
好きなブラウザでGoogleにアクセスします。適当な単語で検索します。検索結果ページが開ければどんな単語でもOKです。(例:ナポリタン寿司)
ログインしている場合は、検索結果右上のプロフィールアイコン画像をクリックします。ポップアップが表示されるので「その他の設定」をクリックします。ログインしていない場合は右上に歯車ボタン(⚙)があると思うのでクリックします。
![Google検索結果ページをダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_19.png)
設定ページに飛びます。左側の「その他の設定」をクリックします。「デスクトップ」の「ダークモード」をクリックします。
![Google検索結果ページをダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_24-1000x628.png)
「オン」にします。「確認」をクリックします。
![Google検索結果ページをダークモードにする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_23.png)
Google検索結果に戻ります。検索結果がダークモードになっています。
![Google検索結果ページをダークモードにした画像](https://www.naporitansushi.com/wp-content/uploads/2024/07/browser-darkmode_25-1000x553.png)
変更しない限りは、別単語で検索、別タブ・別ウィンドウで開いてもテーマを維持してくれます。ダークモードから元のライトモードに戻すには同じ手順で「その他の設定」ページを開いて「ダークモード」をオフにします。
Windowsをダークモードにする方法
本記事ではWindows10、Windows11の両方を紹介します。筆者は現在Windows10の環境が手元にないため、アップデートなどで方法が変わっていたらすみません。
Windows10でダークモードにする方法
タスクバーのスタートボタンを左クリックします。「設定」をクリックします。
![Windows10をダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_05.png)
左側のメニューの「色」をクリックします。「色を選択する」の部分をライトからダークに変更します。
![Windows10をダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_04.png)
ダークモードになります。
![Windows10をダークモードにする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_03.png)
エクスプローラーもダークモードになります。
![Windows10のエクスプローラーをダークモードにした画像](https://www.naporitansushi.com/wp-content/uploads/2021/06/browser-darkmode_02.png)
Windows11でダークモードにする方法
Windows11の設定を開きます。スタートボタンを右クリック→「設定」をクリックするか、キーボードのWindows+Iで起動できます。
![Windows11をダークモードにする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2022/02/browser-darkmode_37.jpg)
左側メニューの中から「個人用設定」を選択します。「テーマを選択して適用する」の部分に表示されているテーマの中から、ダークっぽいテーマ(とか
)を選択します。
![Windows11をダークモードにする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2022/02/browser-darkmode_38.png)
エクスプローラー、設定、スタートメニュー、タスクバーなどがダークモードになります。
![Windows11をダークモードにする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2022/02/browser-darkmode_39.png)
感想
以上、「Google Chrome」、「Vivaldi」、「Microsoft Edge」、「Floorp」などのブラウザをダークモードにする方法、及びWindows全体をダークモードにする方法でした。
「ダークモードを一度も試したことがない!」という方におすすめしたいです。僕はダークモードの存在を知って衝撃でした。なんか目に優しい気がします。