VSCodeのカラーテーマをカスタマイズする
2021/10/15時点
概要
ちょっとした変更なら、setting.jsonを書き換えればいい
けど、syntaxの変更まではできない（※1）
基本的には、新しくThemeを作って、インスコする方が早い気がする
（※1）
なんかsetting.jsonからでもいけそう
やり方
yoとvsceが入ってなかったら入れる
code: (sh)
npm install -g yo generator-code
npm install -g vsce
拡張機能の溜め場を作る
cdでそこに移動
僕は~/work/vscode/にしています
yo codeでプロジェクト生成
適宜指示に従う
freshに作るのでいい
${theme_name}/package.jsonを以下みたいにしてくれ
code: package.json
{
"name": "verdandi-extended",
"displayName": "Verdandi Extended",
"description": "",
"publisher": "ngng628",
"version": "0.0.1",
"engines": {
"vscode": "^1.61.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "Verdandi Extended",
"uiTheme": "vs",
"path": "./themes/ngng628-color-theme.json"
},
{
"label": "Verdandi Extended (Dark)",
"uiTheme": "vs-darkhhh",
"path": "./themes/ngng628-color-theme-dark.json"
}
]
}
}
${theme_name}/themes/をいじる
Currentのカラーテーマの設定ファイルはコマンドパレットで
>Developer: Generate Color Theme From Current Settings
すると取ってこれる
これをコピペでおk
適宜カスタマイズしよう！
vsce pachageでインストール用ファイルが生成される
コマンドパレットで>Extensions: Install from VSIX的な文言でさっき生成したファイルをインストール
知見
vscode標準のテーマは、プロパティ名が豊富