アプリ開発者だけでなく一般のウエブ閲覧者でもブラウザのダークモードを好んで利用している方が多いようです。ダークモードは見やすく目が疲れにくくなるだけでなく、PCのバッテリー消費量が減るからです。特に動画は見やすくなりますね。私自信ブログを何年も書いておりますが、実際にダークモードは集中力が上がります。この度GoogleはChromeをWindows10のダークモードに対応させました。少し前にはChromeをダークモードにできる公式テーマ（スキン）もリリースしています。この記事ではChromeをダークモードにする方法をまとめます。便利な拡張機能も紹介しますよ。
［1］【基本】Windows10のダークモードを利用する方法
Windows10にはアプリをOS的にダークモード化する機能を備えています。これを使えばブラウザ Chromeをダークモードにできます。
しかしどの程度Chromeをダークモードにするかは好みにもよりますので、以下の順番ではまたは組み合わせてダークモードにすることをおすすめします。
- Windows 10（OS）のダークモード機能を用いてアプリのインターフェースをダークモードにする。
- Winddows 10のデスクトップ背景の色を黒する。
- Chromeの試験運用版の機能（Experiments）を用いてWebサイト（コンテンツ）を強制的にダークモードにする。
1 Windows 10（OS）のダークモード機能を用いて、アプリをダークモードにする
これを利用するなら、上の画像のように、Chromeの「タブ」「アドレスバー」「ホームボタン」「ブックマークバー」だけでなく、右クリックした時に表示される「コンテキストメニュー」の背景に至るまで、徹底的にChoromeをダークモード表示にできます。
設定は簡単です。
❶ スタートボタン
❷ 設定（⚙）
❸ 個人用設定
から、
❹ 「色」
❺ 「色を選択する」のプルダウンメニュー
❻ 「ダーク」を選択。
上記の ❶~❺ の手順でWindows10の個人設定でデ「色」を「ダーク」にすると、以下のようにChromeの「タブ」「アドレスバー」「ホームボタン」「ブックマークバー」全体がダークモードに変様しました。
2 Winddows 10のデスクトップ背景の色を黒する。
デスクトップの背景もついでにダーク（黒にしたい場合）は、同じく設定の「個人用設定」から
❶ 「背景」をクリック。
❷ 「単色」を選択。
❸ 「黒」 に☑をいれる。
の順でデスクトップの背景までダークモード一色になります。
Chromeの試験運用版の機能（Experiments）を用いてWebサイト（コンテンツ）をダークモードにする。
しかしよく見ると、Chromeで表示したWebサイト（上記の例：Gmail）がダークモードになっていませんね。実はWebサイトのほんの一部しかダークモードに対応しておらず、Gmailや他のGoogleサービス、そしてご覧のブログもダークモードに対応していません。
■ Chromeのダークモードに対応しているサイトはYoutubeなどごく一部。
しかしWebサイトのコンテンツまで、つまりダークモードに対応していないWebサイトまで強制的にダークモードにすることもChromeでは可能です。
それはChromeの開発者向けの試験運用版の機能（Experiments）ページでダーク・モードを「許可」することでWebコンテンツそのものを半ば強制的にダークモードにすることです。
この方法でChromeで表示するWebコンテンツすべてをダークモードにしたい方は
❶ Chromeのアドレスバーに【Chrome://flags】と入力し、❷ 「Force Dark Mode for Web Contents」の設定を❸ 「Default」から ❹「Enabled」に変更し最後に❺ 「Relaunch」を押して確定します。
そうするとGmailなどダークモードに対応していないWebサイトのコンテンツまでが完全にダークモードになりました。
※ 試験運用版の機能（Experiments） はあくまでも試験的な機能なので、Chrome上で思わぬ動作が発生する可能性があることをご承知ください。まあ、ダークモードを強制するぐらいなら一部のWebコンテツの色味が悪くなるだけですけどね。
［2］【テーマの利用】Chromeの公式「Just Black」
次にChromeの公式テーマ「Just Black」を利用してChromeをダークモードにする方法です。
「Just Black」は2019年3月にリリースされた14色のテーマの一つです。いわゆるネイティブテーマです。公開してから一ヶ月も経たないうちに100万回ダウンロードされているという人気ぶりです。
上記のChromeウエブストア・ページから「Just Black」を選択するだけてChromeをダークモードにできます。
稚拙のブログであはりますが、こんな感じで表示されます。
しかしこのテーマだけでは、完全にChromeをダークモードにできません。確かに、「アドレスバー」や「拡張機能ボタン」「ブックマークバー」の背景は黒にできますが、Windowsのシステムに依存する「コンテキストメニュー」の背景まではダークモードにできません。
ですからChromeを徹底的にダークモードにするためには、上のWindowsのシステムの色を「ダーク」で説明しているとおりにしたほうが良いです。
それにしても上記のテーマはChrome開発チームが愛を込めて作成した公式テーマだけありますね。
■ Youtubeが見やすい！
YoutubeをWindows10 PCで視聴する場合、ダークモード化したChromeで表示すると以下のような感じになります。
「見やすい！」ですね。
もともとYoutubeは動画に集中できるように映画館のように背景をブラックにしています。（ピンクで囲っている部分）つまり元来ダークモードなわけです。ChromeをダークモードにすることによってChromeが動画専用アプリに生まれ変わったようです。最高です。
［3］【拡張機能】「Dark Reader」でWebページの背景までダークモードに！
上記のChrome公式ダークモード・テーマがリリースされる前は、主にChrome拡張機能でダークモードを実現していました。以下の2つの拡張機能は上記のChrome公式ダークモード・テーマと併用することでChromeを好みのダークモードに仕上げます。
まず有名なのは「Dark Reader」というChrome拡張機能です。ChromeだけでなくFirefox版やSafari版もあります。
「Dark Reader」は上で紹介したChrome公式テーマと違い、Webページの背景の色までカスタマイズ可能なため、徹底的にChromeをダークモードにできます。好みがあると思いますが、Webページのテキストや画像を見やすく（？）できます。
この拡張機能はツールバーやメニュー部分はダークモードにできませんので、記事前半で紹介したWindowsのシステムによるダークモードやChrome公式ダークモード・テーマと併用すると完全ダークモードを実現できます。
またこの拡張機能のオプションで、「輝度」「コントラスト」「セピア」を調整できますし、表示するサイトごとにきめ細かく調整可能です。完成度が非常に高いダークモード拡張機能です。
［4］【拡張機能】ワンクリックで白黒を変えられる「Dark Mode」
最後に紹介するこの拡張機能はChromeで表示したWebページを拡張ボタンをワンクリックすることで簡単にダークモードに切り替えられます。
目の疲れ具合に応じて、また表示しているサイトの色使いによって、背景をダークモードにしたり戻したりすることが非常に容易です。
オプションから細かく調整されている多数のダークモード・テーマを選択できます。
さらに、Super Dark Mode – Chrome ウェブストア もかゆいところに手が届くと言えるほど細かい設定が可能になっている超ダークモード拡張機能です。
他にもChrome ウェブストア – Dark Mode にはChromeをダークモードにできる拡張機能が多数登録されていますが、上の3つが非常に人気です。
【おまけ】ディベロッパーツールをダークモードにする方法
Chromeでウェブデザインをしているエンジニアには常識かもしれませんが、最後にChromeディベロッパーツールをダークモードにする方法を紹介ます。
Chromeブラウザの開発モード（以下は「検証」ツール）を利用している方は、Chromeのダークモードを利用することで集中力が高まり、眼球が疲れにくくなると思います。
Chromeのデベロッパーツールをダークモードにする方法は以下の通りです。
1．設定（︙）から「Settings」へ。
2．Appearance＞Theme のプルダウンメニューで「Light」から「Dark」を選択。
まとめ
PCをダークモード中心で利用している方は、上記で紹介した3つのダークモードツールで事足りると思います。まとめると
- Windows10のシステムを利用してChromeをダークモードにする。
- Chrome公式テーマ「Just Black」でメニューやツールバー/ブックマークバーをダークモード化する。
- 輝度やコントラストをサイトごとに細かく調整したいなら拡張機能 Dark Reader 等を利用する。
- ディベロッパーツールだけでダークモードにする。
コメント