課題

VSCodeの言語拡張を作成中に、TextMateで指定するハイライト色をどうすれば自分好みに設定できるか悩みました。
自作のカラーテーマを作るという手もありますが、それはあまり魅力的に感じなかったため、普段使っているGitHubテーマ「GitHub Dark」の色を直接活用する方法を試してみます。

これってどうやるの？

目標は、GitHub Darkのテーマで使用されている色をカスタマイズして、狙った色でコードをハイライトすること。テーマ全体を作り直すのではなく、既存の色から選び出して適用するだけなので、簡単かつ効果的です。

色の探し方と設定方法

色を見つけるには、GitHubテーマのソースコードを確認しましょう。たとえば、tokenColorsセクション（246行目あたり）から、お好みの色を選んでみてください。

" 実際に試してみる
以下は、実際にハイライトをさせてみて確認した例です。自分が欲しい色っぽいものを抽出してみました。

{
  "name": "support.constant.gcode",
  "match": "supportconstant-blue"
},
{
  "name": "source.regexp.gcode",
  "match": "sourceregexp-lightblue"
},
{
  "name": "entity.name.tag.gcode",
  "match": "entitynametag-green"
},
{
  "name": "variable.gcode",
  "match": "variable-orange"
},
{
  "name": "message.error.gcode",
  "match": "messageerror-pink"
},
{
  "name": "brackethighlighter.tag.gcode",
  "match": "brackethighlighter-gray"
},
{
  "name": "markup.heading.gcode",
  "match": "markupheading-blue-bold"
},
{
  "name": "invalid.broken.gcode",
  "match": "invalidbroken-pink-italic"
},
{
  "name": "markup.changed.gcode",
  "match": "markupchanged-orange"
},
{
  "name": "markup.ignored.gcode",
  "match": "ignored-dark"
},
{
  "name": "meta.diff.range.gcode",
  "match": "diffrange-purple-bold"
},
{
  "name": "string.other.link.gcode",
  "match": "stringother-liteblue-under"
},
{
  "name": "entity.gcode",
  "match": "entity-purple"
},
{
  "name": "keyword.gcode",
  "match": "keyword-red"
}

このコードの中の、 match のみ含んだファイルを登録して実行してみると、実際画面でどのように表現されるのかを確認することができます。

結果

使いにくそうな色も混ざっていますね。

まとめ

最終的に、いくつか理想的な色を見つけて適用することができました。拡張機能のカスタマイズに色の名前や意味にはこだわらず、見た目だけを採用して作業を進めました。これで、開発環境がより自分好みのものに仕上がります！