VSCodeの色のカスタマイズ

はじめに

Visual Studio Code（以下VSCode）で、ダークモードにしているエンジニアは多いと思います。目が疲れにくいということから。確かにそれはそう。

でも、全部真っ黒になりすぎて境界線がわからない！と思いませんか？

そのカスタマイズ方法をお伝えして、世界中のエンジニアを救いたいと思います。
結論は、settings.jsonで色を変えられますという話です。

私が感じる課題、真っ黒で識別しづらい問題

私のとある作業の画面全体をさらしますが、こんな画面です。中身は気にしないでください。ウィンドウの色の話です。

注釈をつけます。文句を言いたいのは大きく２つです。

問題①：アクティブなウィンドウのタブがわかりづらい

今編集しているファイルのタブがわかりづらいです。２つに分割したときを表示してます。

間違い探しかなっていうレベルです。コーディングをしているときに、こんなことに脳を1mmも使いたくないのです。

まず右側の、本当にカーソルが入ってるペインですね。タブの上に細い青い線が入っていて、それがアクティブな印です。背景色も若干灰色だし、文字色も白ですが、それにしても見づらい。

つぎに左側の、非アクティブ側です。特にこちらがひどい。開いているファイルのタブは、左から３つ目のsettings.jsonですが、背景色がすごくわずかに灰色ですかね。
元々いろんな条件で文字色が違う中で、背景色がちょっと違うことなんて、気づきやしないですよ。超絶見づらい。

問題②：システム領域と、コード領域の区別がない

②で示した周辺の部分は、VSCodeというツールの一部です。ソースによって変わることが基本的にない部分。ここと、コードの部分の色が同じなことが嫌です。

タイトル部は、VSCodeを２つ別のプロジェクトで立ち上げている場合、ウィンドウが重なりますよね。その２つのウィンドウの境界がわかりづらいことがイラっとします。後ろのウィンドウのタイトルをクリックしたいけど、タブなのか手前のタイトルなのか・・・。

見たい情報に対して、少し広い視野で少し先まで見えてしまう。見たくない情報も見たうえで、「今は、ここまで必要、その外にあるこの情報は不要」と判断する脳を使っている感じ。

（脳脳って、足りない人みたいですね、そうかもしれません）

他にも、カーソル行とか

カレントのカーソルが点滅している行は、上下に薄ーく線が出ているんですが、主張が弱すぎるでしょ。まぁこれは好みもあるんですが、私はちょっとだけ主張してほしい。

さて文句を言う時間は無駄なので解決策を。

解決方法：settings.jsonに設定を追加

まず、私なりの改善後はこちら。変えてあるのは、タブの色、システム領域の色、カーソル行です。

色が気にくわないという人は変更してください。この記事は、変更できますよ、という内容です。

設定値はここをご覧ください。

実はこのサイトもひどくて、絵が１つもないので、どの設定を変更するとどこが変わるのかわからない。つまり、②の部分をMicrosoft社が何と呼んでいるのか知らないと、変更できないという・・・。名前なんて知るか！

そこで私が設定している内容を紹介します。

Ctrl+Shift+P→settings.jsonでファイルを開いたファイルに、追加します。
上の画像で、意図的に無効にしていますという部分です。（後ろにxをつけて、無効にしていました）

settings.json（一部）

  "workbench.colorCustomizations": {
    "tab.activeBackground": "#4b4b53",
    "tab.hoverForeground": "#ffffff",
    "tab.hoverBackground": "#2f3233",
    "titleBar.activeBackground": "#1f44a0",
    "titleBar.activeForeground": "#b4b9cd",
    "titleBar.inactiveBackground": "#183170",
    "titleBar.inactiveForeground": "#868fa7",
    "activityBar.background": "#091638",
    "activityBar.foreground": "#dbdce0",
    "activityBar.inactiveForeground": "#6a7699",
    "statusBar.background": "#26244d",
    "statusBar.foreground": "#848484",
    "editor.lineHighlightBackground": "#292929"
  },

ざっくり説明すると、

• tab
  • エディタのファイル名が書いてあるタブ
• titleBar
  • 上の、ファイル、編集、選択・・・とかのメニューがあるところ
• activityBar
  • 左の、ファイルとか検索とかのアイコンが並んでいるところ
• statusBar
  • 下の、mainとか行番号とか出るところ
• editor
  • エディタの中身。"editor.lineHighlightBackground"は、カーソル行の背景

他にも色を変えたい箇所がある方は、これかも？っていうのをサイトからコピーしてきて、#FF0000（赤）とか#FFFF00（黄色）とか極端な色を付けて、場所を識別するとよいです。

おわりに

初期値に文句はありますが、カスタマイズできるという余地があるのは嬉しいです。

でもその前に、WindowsというUI/UXの根底を作っているような優秀な人たちなのだから、これがおすすめ！っていう状態でリリースしてほしいなと思いました。

そういえばウィンドウタイトルに出す文字列も、settings.jsonで"window.title": "${rootName}",と変えてます。タイトルが長いと、メニューが負けて「…」になるという現象が嫌すぎて、極力短くするために。なんとかする方法知っている方は是非教えてください。メニューの方が大事でしょう。右に隙間があるんだからタイトルが右に寄るか、消えてほしい。

では世界中の皆さん、よいVSCodeライフを！