VSCodeのテーマをカスタマイズ（色を減らしたい） #VisualStudioCode

環境: macOS

VSCodeのテーマをカスタマイズしたい。

色が多すぎて目が疲れる。
プログラムの文法と色付けがズレることがあってイラッとする。

最終的にできたものはこんな感じです。基本は白黒、コメントの灰色以外は青と緑だけ。

参考:

既存のテーマをカスタマイズ

VSCodeのコマンドパレットから "Open Settngs(JSON)" を選んでsettings.jsonを開きます。 "editor.tokenColorCustomizations": { " まで入力すると、テーマの名前がサジェスチョンに出ますので（サジェスチョンが有効なら）、自分が使っているテーマを選びます。

settings.json

    "editor.tokenColorCustomizations": {
        "

"[テーマの名前]" の中で "textMateRules" に配列を指定します。

settings.json

    "editor.tokenColorCustomizations": {
        "[Visual Studio Light]": {
          "textMateRules": [
          ]
        }, 
    },

カスタマイズしたいテーマのソースコードを調べます。デフォルトのテーマは、次のディレクトリ内のJSONファイルです。

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-何々/themes/

インストールしたテーマのJSONは、次のディレクトリ内にあります。

~/.vscode/extensions/作者.拡張機能-バージョン/themes/

あるいは、Githubでvscodeや拡張機能のソースコードを調べます。

https://github.com/microsoft/vscode/tree/master/extensions/theme-defaults/themes

こうしたJSONファイルの中の "tokenColors" から「それらしき」部分をコピーして、setting.jsonに貼り付け、"foreground" の色を変えます。次の例は Visual Studio Light の文字列リテラルを赤から緑に変えます。

settings.json

    "editor.tokenColorCustomizations": {
        "[Visual Studio Light]": {
          "textMateRules": [
            {
              "scope": [
                "string",
                "entity.name.operator.custom-literal.string",
                "meta.embedded.assembly"
              ],
              "settings": {
                "foreground": "#219186"
              }
            }
          ]
        }, 
    },

斜体や太字をやめたいときは、"fontStyle" を空にします。

            {
              "scope": "comment",
              "settings": {
                "fontStyle": "",
                "foreground": "#93A1A1"
              }
            },

Rubyの色のカスタマイズ

キーワードのカスタマイズ

常々やめてほしいと思っていたのは、Rubyのinclude、private、attr_accessorに色を付けることです。これってキーワードじゃなくてModuleクラスやClassクラスのメソッドじゃん。has_manyとattr_accessorが別の色になるのはおかしいと思う。

vscodeや拡張機能vscode-rubyのソースコードを調べて、"scope" に指定すべき文字列を探します。

一般的なキーワードは "keyword"、includeやprivateにあたる部分は "keyword.other.special-method.ruby" であるようです。次のようにキーワードは青、includeやprivateは黒とします。

    {
      "scope": "keyword",
      "settings": {
        "foreground": "#0451a5"
      }
    },
    { // include, private, attr_accessor ...
      "scope": "keyword.other.special-method.ruby",
      "settings": {
        "foreground": "#000000"
      }
    },

ハッシュのキーのカスタマイズ

vscodeとvscode-rubyのソースコードを眺めていたら、symbols as hash key というのを見つけました。ハッシュのキーと値の場合で色を分けられたら見やすいかもしれない。

次のように設定することで、キーのシンボルは青、値のシンボルは緑にできました。

    {  // Ruby: symbol, true, false, nil
      "scope": "constant.language",
      "settings": {
        "foreground": "#219186"
      }
    },
    {
      // Ruby: symbols as hash key
      "scope": [
        "constant.other.symbol.hashkey.ruby",
        "constant.language.symbol.hashkey.ruby"
      ],
      "settings": {
        "foreground": "#0451a5"
      }
    }

テーマを自作する

VSCodeのマニュアルにカラーテーマを自作する方法が載っていましたので、試してみたところ割と簡単にできました。

必要なツールをインストールします。

% npm install -g yo generator-code

次のコマンドで質問に答えていくとひな形ができます。

% yo code

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? No, start f
resh
? What's the name of your extension? Light Simple
? What's the identifier of your extension? light-simple
? What's the description of your extension? Based on the built-in light theme, r
educed the colors.
? What's the name of your theme shown to the user? Light Simple
? Select a base theme: Light

themesディレクトリの下にあるJSONファイルを開き、デフォルトのテーマ、あるいはインストールしたテーマのJSONを貼り付けます。

Visual Studio Lightではソースが2つ（light_vs.jsonとlight_defaults.json）に分かれていたので、light_vs.jsonの "tokenColors" と light_defaults.jsonの "colors", "semanticHighlighting" を使ってまとめました。

あとは色を変えていくだけです。

themes/light-simple-color-theme

{
  "colors": {
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
// 中略
  },
  "semanticHighlighting": true,
  "tokenColors": [
// 中略
    {
      "scope": [
        "string",
        "entity.name.operator.custom-literal.string",
        "meta.embedded.assembly"
      ],
      "settings": {
        "foreground": "#219186"
      }
    },
// 中略
  ]
}

VSCode上でF5キーを押してウィンドウを開き、⌘K → ⌘T で自作のテーマに変えると、編集中のテーマがリアルタイムで反映されます。

自作のテーマをインストールできるようにするには、次のコマンドをインストールします。

% npm install -g vsce

テーマのディレクトリで、vsixファイルを作るコマンドを実行します。

% vsce package

VSCodeに戻り、拡張機能のタブで上の[...]のメニューから「VSIXからのインストール」を選び、生成されたvsixファイルを選べば、自作のテーマをインストールできます。あとは ⌘K → ⌘T でテーマを選びます。