VSCode の配色テーマの一部の色のみを変更する： カーソル・カーソル行、選択範囲などの色を変更した際のメモ

VSCode を利用している中、不定期で、使った事がない配色テーマを試したりしています。
最近、試した配色テーマの中に以下の「Blue Forest」があるのですが、使ってみるとカーソル位置や範囲選択をした部分が見づらくなってしまいました。
（※ ディスプレイの明るさの設定や、文字の色によっては、そこまで見づらくない場合もあるのですが）
　●Blue Forest - Visual Studio Marketplace
　　https://marketplace.visualstudio.com/items?itemName=Amirabbas.blue-forest

その見づらくなった部分の色だけ変更できないか調べたところ、その方法が分かり、上記の問題は解決できました。

今回対応した内容について、またいつか必要になりそうではあるものの、しばらく使わなそうなので、内容を忘れてしまいそうに思われました。それで、将来のためにメモを残しておこうと、この記事を書きました。

## 追加した設定の内容
補足説明などより先に、まずは設定した内容を掲載します。

設定で追加した部分は、以下に掲載した内容の中の「workbench.colorCustomizations」という項目以下です。この内容は、「settings.json」に追加しました。
（なお、「editor.fontSize」・「workbench.colorTheme」の 2つは、今回の対応を行う前に設定していたものです）

```json
...
    "editor.fontSize": 14,
    "workbench.colorTheme": "blue-forest",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#5c75e331",
        "editor.selectionBackground": "#a8aecdca",
        "editor.selectionHighlightBackground": "#606eb491",
        "editorCursor.foreground": "#dddcc3c4",
    }
...
```

## 設定前後の比較
次に、設定前後での見た目を比較してみます。

### 設定変更前
まず 設定前の状態を画像 2枚で掲載します。
### 「範囲選択 ＋ 選択範囲の内容と同じ内容」の着色（設定変更前）
![範囲選択 ＋ 選択範囲の内容と同じ内容：（設定変更前）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ad0b2dab-48a9-ce7d-7d6c-4a1b910dec30.png)
### 「カーソル ＋ カーソル行」の着色（設定変更前）
![カーソル ＋ カーソル行：（設定変更前）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bf9bd180-a570-aded-df2e-542f626dae15.png)

自分の体感では、ディスプレイの明るさが控えめに調整された際、とても見づらかったです。

### 設定変更後
以下は、設定を変えた後の状態です。

上記の設定変更前と比べて、全体的に着色された箇所が目立つようになりました。
その中でカーソル行の着色だけは、変更前後の差は控えめですが、カーソルがはっきりした色になったのもあり、これくらいの差でも自分の体感では十分な変化でした。

### 「範囲選択 ＋ 選択範囲の内容と同じ内容」の着色（設定変更後）
![「範囲選択 ＋ 選択範囲の内容と同じ内容」の着色（設定変更後）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/87e9f96b-78dc-ffca-22d1-a5b8f2e51b35.png)
### 「カーソル ＋ カーソル行」の着色（設定変更後）
![「カーソル ＋ カーソル行」の着色（設定変更後）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b73cdec-138b-19d0-22f0-ea3165eb0f45.png)

## 設定を追加した際の流れ
### 参照した情報など
今回の対応を行う際に、まずは色の変更を行う方法などを検索して、手順が説明されたページ・設定項目の意味が記載されたページを探しました。そして、以下が実際に参照したページです。

- [VSCodeで選択範囲や検索文字列などの背景色を変更する方法 | TechMemo](https://techmemo.biz/sw/vscode-workbench-colorcustomizations/)
- [【VS Code】カーソル行の背景色を変更する方法](https://nodoame.net/archives/10866)
- [Visual Studio Codeの設定「虎の巻」：配色編：特集：Visual Studio Codeを使いこなせ（4/4 ページ） - ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/1709/15/news027_4.html)

上記を見て、「settings.json」の中に「workbench.colorCustomizations」という項目を作れば良さそうであることが分かりました。そして、自分が変更したい対象の設定項目名は、以下の 4つのようでした。

- editor.lineHighlightBackground
- editor.selectionBackground
- editor.selectionHighlightBackground
- editorCursor.foreground

#### Blue Forest の設定の参照先
上記の 4項目について、その後は「Blue Forest」で設定されているデフォルトの色を元に変更を加えたり、見やすそうな色を設定してみたりして、設定値を決めていきました。

その際、「Blue Forest」で設定されている色を確認する際には、GitHub上の以下の情報を参照しました。
　●vscode-blue-forest-theme/blue-forest-color-theme.json at master
　　https://github.com/AmirabbasJ/vscode-blue-forest-theme/blob/master/themes/blue-forest-color-theme.json

#### 色の調整
色の調整は、基本的に「settings.json」上のカラーピッカー（※ 以下の赤矢印で示した部分から呼び出せるもの）を使い、GUIベースで行いました。
![カラーピッカー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/14ca9f6d-1f84-0079-9629-458766b20c0a.png)

## 【追記】 その後の変更（随時、追記予定）
その後、加えた変更を追記していきます。

- アクティブなタブの背景色（ `tab.activeBackground` ）も変更
- スクロールバーのスライダーの色（ `scrollbarSlider.background` ）も変更

```json
...
    "editor.fontSize": 14,
    "workbench.colorTheme": "blue-forest",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#5c75e331",
        "editor.selectionBackground": "#a8aecdca",
        "editor.selectionHighlightBackground": "#606eb491",
        "editorCursor.foreground": "#dddcc3c4",
        "tab.activeBackground": "#293552",
        "scrollbarSlider.background": "#4f52b5b8",
    }
...
```

※ 設定は、「基本設定：ユーザー設定を開く（JSON）」から
![基本設定：ユーザー設定を開く（JSON）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/aa5d47dc-6a1d-4f49-b06a-326e93f6345d.png)