yoを使って雛形を生成
The Yo Code Visual Studio Code Extension Generator
yoとgenerator-codeをnpmでinstall
npm i -g yo generator-code
雛形を生成
yo code
New Color Themeを選択する
Themeの雛形をURLで渡せるので今回はvscode-extension-samples/Sample_Light.tmTheme at master · Microsoft/vscode-extension-samplesを使う。Colorsublimeとかでもよい。
あとは聞かれるままにthemeの名前等を埋める。
localでthemeをvscodeに追加する
~/.vscode/extensionsにyoで生成したディレクトリを突っ込むだけ。あとはVSCode上からいつも通りにthemeを適用するのと同じ。
themeを編集する
yoで生成した場合、theme/XXX.tmThemeファイルが生成されるのでそれを編集する。
有効なオプションはtextmateに従えばよいのだが、これがイマイチわかりにくくて手探りで泥臭く雛形に適用しながら作っていった。もっとスマートな方法がほしい。
有効なオプションの資料
Creating a Custom Theme
TextMate Manual » Language Grammars
sublime textのdocumentもいいヒントになった。
Scope Naming – Sublime Text 3 Documentation
textmateのテーマを作るツール。これで生成してないけど、対応するオプションを知るのに役立った。
Marketplaceにpublishする
vsce Publishing Tool - Publishing your Visual Studio Code Extensions
vsceというpublish toolを使うらしい。
npm install -g vsce
vsceでpublishするにはVisual Studio Team Servicesに登録してAccess Tokenを得る必要があるので適当に登録する。
publisherを登録
vsce create-publisher (publisher name)
プロジェクトルートに移動してpublishする
vsce publish
成果物
Harmonic16 light Theme - Visual Studio Marketplace
cotto89/vscode-theme-harmonic16-light: VSCodeTheme base on base16-harmonic16-light