vscodeの配色を変更して快適環境を作ろう

2018.4.12

なぜ

光沢液晶のパソコンでダーク系の配色テーマ設定にした vscode を開いたら、映り込みがすごくてライト系のテーマに変えたまではよかったのですが、
マークダウンファイルの見出し行が見づらいカラーになっていたので、変更するしかないと思い、チャレンジしました。

テーマファイルの場所

ベースとなる設定を参考にしながら配色設定を変更したいので、まず、現在使用可能な配色テーマファイルを見つけます。

Windows7 の場合は下記の場所にテーマファイルが格納されていました。

C:\Program Files\Microsoft VS Code\resources\app\extensions

たとえば、デフォルトで持っているテーマだと下記の場所になります。

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

ファイル名はそれっぽい名前が付けられていますので、テキストエディタで開いて見みると良いでしょう。

light_vs.json

今回はこのファイルに書かれている設定を参考に編集します。

準備

配色設定を変更するための準備です。

メニューから、ファイル＞基本設定＞設定とクリックし、setting.json を開きます。

左側の「既定の設定」から下記の部分を見つけます。

// 現在選択している配色テーマで配色とフォント スタイルを上書きします。
"editor.tokenColorCustomizations": {},

カーソルを合わせると鉛筆マークが行の左側に表示されますので、クリックします。

右側の領域に行がコピーされれば準備完了です。

設定変更

マークダウンファイルの見出し行に設定されているカラーを変更します。

設定を上書きするテーマを指定することができ、[Visual Studio Light]テーマを使用している場合は下記のようになります。

"editor.tokenColorCustomizations": {
    "[Visual Studio Light]": {
        "textMateRules": [
            {
                "scope": "markup.heading",
                "settings": {
                    "fontStyle": "bold",
                    "foreground": "#4169E1"
                }
            }
        ]
    },
},

※配色テーマ（"[Visual Studio Light]“の部分）の名称が分からない場合は、“editor.tokenColorCustomizations”: {とタイプした後、改行して「"」をタイプすると利用可能なカラーテーマが候補として表示されます。

具体的な設定は、textMateRules ブロックの下に、light_vs.json から設定をコピーアンドペーストして編集します。

この部分です。

"scope": "markup.heading",
"settings": {
    "fontStyle": "bold",
    "foreground": "#4169E1" ←設定値を変更した
}

この例では、「# 見出し」の行が、ロイヤルブルーになるようにしています。
「“foreground”: “#4169E1”」この部分が該当箇所です。

同じ要領で変更したい色があれば、現在使用している配色テーマから設定をコピーして、textMateRules の配列に追加していけば、好みのスタイルに変更できます。

まとめ

配色テーマを作るほどの気合はありませんが、見づらい部分があれば、簡単にカスタマイズ出来るというのは良いことですね。

今回、配色テーマ全体の設定を上書きする形で行いましたが、さらに特定のファイルタイプのときだけ変更することもできそうです。