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

環境: macOS

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

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

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

<img width="796" alt="code.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308595/c2fe7168-6769-4d50-267d-c91bdce1040e.png" border="1">


参考:

- https://code.visualstudio.com/docs/getstarted/themes
- https://code.visualstudio.com/api/extension-guides/color-theme


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

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

```text:settings.json
    "editor.tokenColorCustomizations": {
        "
```

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

```text: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 の文字列リテラルを赤から緑に変えます。

```text: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" に指定すべき文字列を探します。

- https://github.com/microsoft/vscode/blob/master/extensions/ruby/syntaxes/ruby.tmLanguage.json
- https://github.com/rubyide/vscode-ruby/blob/master/packages/vscode-ruby/syntaxes/ruby.cson.json

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

```text
    {
      "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のマニュアル](https://code.visualstudio.com/api/extension-guides/color-theme#create-a-new-color-theme)にカラーテーマを自作する方法が載っていましたので、試してみたところ割と簡単にできました。

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

```
% 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" を使ってまとめました。

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

```text: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 でテーマを選びます。