VSCodeの色のカスタマイズ

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/527d4097-a2f4-f8c8-bc33-738ac1cf9a43.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/bacd8230-9a0b-737f-abb3-1f8df2c6edea.png)

## 問題①：アクティブなウィンドウのタブがわかりづらい
今編集しているファイルのタブがわかりづらいです。２つに分割したときを表示してます。

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/234a4154-b43b-9a15-222b-cb02c07a8f11.png)

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

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

## 問題②：システム領域と、コード領域の区別がない
②で示した周辺の部分は、VSCodeというツールの一部です。ソースによって変わることが基本的にない部分。ここと、コードの部分の色が同じなことが嫌です。

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

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

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

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

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

# 解決方法：`settings.json`に設定を追加
まず、私なりの改善後はこちら。変えてあるのは、タブの色、システム領域の色、カーソル行です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/3da66090-c9e1-33cf-2ae2-fee728a248f6.png)

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

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

https://code.visualstudio.com/api/references/theme-color

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

:::note info
2025/4/2 更新情報
サイトがアップデートされ、少し挿絵が入っていました。少し。
私が挙げた問題の②の`titleBar`, `activityBar`, `statusBar`の絵は、ないです。
問題①の`tab`はちょっとある。
:::


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

`Ctrl+Shift+P`→`settings.json`でファイルを開いたファイルに、追加します。
上の画像で、意図的に無効にしていますという部分です。（後ろに`x`をつけて、無効にしていました）
```json: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}",`と変えてます。タイトルが長いと、メニューが負けて「…」になるという現象が嫌すぎて、極力短くするために。なんとかする方法知っている方は是非教えてください。メニューの方が大事でしょう。右に隙間があるんだからタイトルが右に寄るか、消えてほしい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/722610/f3dd7c0d-abd4-ba1d-98a6-d2cf762d6cde.png)


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