どうも！豆吾郎です。
コーダーやプログラマーの方でコードを書く際に、テキストエディタの背景色を黒される方、多くいらっしゃるかと思います。
背景が黒いと、白に比べて目が疲れにくいですし、要素によって色がついて黒とのコントラスト差によりコードも見やすくなります。
ただ、テキストエディタは設定で変更できますが、実際にChromeで検証をする際に使うデベロッパーツールの背景色のデフォルトは白。
時々どこをいじっているのか分からなくなり、不便だったり見つけすぎると目が疲れます。
そこで今回はChromeのデベロッパーツール、開発者メニューエディタの背景色を黒にする方法をご紹介します。
Chromeの検証機能/開発者モード(デベロッパーツール)で背景色を黒に変更する方法
なんと設定方法はわずか3ステップ。
まずはキーボードのF12キーを押してデベロッパーツールを起動します。
(Ctrl+Shit+Iキー、もしくは右上のメニュー→その他ツール→デベロッパーツールでもOK)
F1キーを押すか、右上の3点メニュー→Settingを押して設定画面を開きます。
デフォルトでPerformance(パフォーマンス)タブが開かれているので、一番上のメニューのAppearace(アピアランス)の中のさらに一番上のメニューのTheme(テーマ)のドロップダウンメニューから、Darkを選択します。
めちゃくちゃ簡単にダークモードに変更できました。
エクステンション(アドオン)で更に改良する方法
以下のようなエクステンションをインストールすることで、よりカスタマイズしたダークモードを使用することも出来ます。
もし標準のダークモードでは少し物足りない・・・という方はエクステンションをいれるのが良さそうです。
参考 greybeard devtools themechrome ウェブストア 参考 DevTools Theme: Zero Dark Matrixchrome ウェブストアChromeのデベロッパーツールをダークモードで使う方法まとめ
ダークモードを使用すると目が疲れにくくなるうえに、なぜか周りからは仕事をしているように見えます(笑)
ぜひ気になった方はダークモードにしてみてください。
きっと仕事がはかどるはずです。
