More than 1 year has passed since last update.

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

VSCode

Last updated at 2023-04-04Posted at 2023-02-07

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つは、今回の対応を行う前に設定していたものです）

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

設定前後の比較

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

設定変更前

まず設定前の状態を画像 2枚で掲載します。

「範囲選択＋選択範囲の内容と同じ内容」の着色（設定変更前）

「カーソル＋カーソル行」の着色（設定変更前）

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

設定変更後

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

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

「範囲選択＋選択範囲の内容と同じ内容」の着色（設定変更後）

「カーソル＋カーソル行」の着色（設定変更後）

設定を追加した際の流れ

参照した情報など

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

上記を見て、「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ベースで行いました。

【追記】その後の変更（随時、追記予定）

その後、加えた変更を追記していきます。

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

...
    "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）」から

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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