はじめに
VSCode のダークテーマのデフォルトがいつの間にか「Dark 2026」というのになっていたので、少しだけ自分好みにカスタマイズした。
行番号
行番号はコードとははっきり差別化したい。非表示にしてもよいが、仕事では「何行目をああしなさい、こうしなさい」と言われることが多いのでしようがなく表示している。
検索
検索の一致表示はデフォルトのままでは明らかに使いにくい。アクティブ(検索結果が見つかってカーソルがある位置、置換ならこれから置き換わる部分)と、ハイライト(一致するがカーソルがない部分)が見分けづらい。アクティブを赤系統に変えて枠線で囲んで透過色と組み合わせて一目で見分けがつくようにした。
コードハイライト
句読点、括弧、引用符などの区切りになる記号を輝度を下げて灰色っぽくした。この方が、変数名、関数名などの識別子、文字列(のなかみ)などが浮かび上がって見やすいと思う。これらの記号は「人(プログラマ)が機械(のコンパイラやVSCodeの)に字句解析を指示する」ためのもので機械に指示が伝わったあとは人がわざわざ目を凝らして読む必要がないのだ。
逆に演算子は白に埋もれるので薄いピンクにして目立つようにした。
特に単項演算子!
htmlサンプル
設定例 settings.json
{
"workbench.colorTheme": "Dark 2026",
"workbench.colorCustomizations": {
"[Dark 2026]": {
"editor.lineHighlightBackground": "#0b0c0d", // 現在行 背景 (#121314) よりかすかに暗
"editorGutter.background": "#1e1e1e", // 行番号はコードの背景と区別したい
"editorLineNumber.foreground": "#668888", // 行番号はコードとは明らかに違う色にしたい
"editorLineNumber.activeForeground": "#88cccc",
"editorBracketMatch.background": "#000077", // 括弧ペア 暗闇にうっすら青く
"editorBracketMatch.border": "#0000dd", // 括弧ペア 暗闇にうっすら青く
"editorIndentGuide.activeBackground1": "#000099", // インデントガイド アクティブ時 暗闇にうっすら青く
"editorIndentGuide.background1": "#040419", // インデントガイド 非アクティブ
"editor.findMatchBackground": "#20000088", // 検索一致（アクティブ）うっすら赤く 枠付き 透過つき
"editor.findMatchBorder": "#ff000055", // アクティブとハイライトは一目で区別できるようハッキリ色相を変えたかった
"editor.findMatchHighlightBackground": "#00ffff19", // 検索一致（ハイライト）うっすら緑 枠付き 透過付き
"editor.findMatchHighlightBorder": "#00ffff55",
"input.background": "#0c0c0c", // 検索 背景 くっきりと黒
"inputOption.activeBackground": "#2a0000", // 検索 オプション チェックされると赤く
"inputOption.activeBorder": "#550000",
},
},
"editor.tokenColorCustomizations": {
"[Dark 2026]": {
"textMateRules": [
{
"scope": [
"punctuation", // 句読点、括弧
"meta.brace", // javascript用 括弧
"punctuation.definition.template-expression.begin", // ` ${ ... } `
"punctuation.definition.template-expression.end",
],
"settings": {
"foreground": "#666666",
}
},
{
"scope": "punctuation.definition.tag", // HTML tag区切り
"settings": {
"foreground": "#444444",
// "foreground":"#2a4d2d", // 7EE787 の 1/3
}
},
{
"scope": "punctuation.definition.comment", // コメント区切り
"settings": {
"foreground": "#454a4f", // コメント本文 (#8B949E) と同じ色相で暗く
// "foreground": "#2e3134", // 8B949E の1/3
}
},
{
"scope": [
"keyword.operator", // 演算子
// "storage.type.function.arrow.js", // <= アロー関数 どうする？
],
"settings": {
"foreground": "#ffdddd", // うっすらピンクで目立つよう、特に単項演算子!
}
},
{
"scope": "punctuation.definition.string", // 文字列の引用符
"settings": {
"foreground": "#526b7f", // 文字列本文 (#A5D6FF) と同じ色相で暗く
}
},
{
"scope": "punctuation.support.type.property-name", // json項目名の引用符
"settings": {
"foreground": "#3e7343", // json項目名 (#7EE787) 同じ色相で暗く
}
},
]
},
},
}
まとめ
最近は golang を主に、HTML や javascript もちょっと触るのでその辺をターゲットとした。
前により細かくカスタマイズしようとして収集がつかなくなったことがある。全言語対応しようとしたら、C# と C++ とでも字句解析ルールがいちいち違うなどして面倒になりすぎたのだ。今回は、基本はデフォルトでどうしても変えたい部分だけ変えることにする。