ニアです、こんにちはー！
今回はVisual Studio Codeの新バージョン0.8.0に、カラーテーマを追加する方法を紹介していきます。

1. TextMate形式のカラーテーマが利用できます

今までのバージョンでは、デフォルトで用意されている「Light」、「Dark」、「High Contrast」の3つのテーマのみ選択できました。

Light
Dark
High Contrast

バージョン0.8.0では、「TextMate」形式のカラーテーマ（拡張子は「.tmTheme」）が利用でき、「Light」、「Dark」、「High Contrast」のいずれかテーマをベースに、エディター部の文字色を変えることができます。

Quiet Light（ベース：Light）
Monokai（ベース：Dark）

また、Visual Studio Code 0.8.0のインストール時に、いくつか「TextMate」形式のカラーテーマが含まれています。

2. カラーテーマをVisual Studio Codeに追加する

今回は「Colorsubline」から、カラーテーマをダウンロードしていきます。

ちなみに、そのサイトにあるカラーテーマの数は250以上。どれにするか、ちょっと迷うかも・・・。

好きなカラーテーマが決まったら、「Download」ボタンをクリックし、カラーテーマ（ここでは「Textmate」）のファイルをダウンロードします。

ダウンロードしたら、その.tmThemeファイルを「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit\themes」フォルダーに移動します。

次に「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit」フォルダーにある「ticino.plugin.json」を開き、ダウンロードしたカラーテーマの情報を追加します。

ticino.plugin.json

{
    "pluginId": "vs.theme.starterkit",
    "contributes": {
        "themes": [
            {
                "id": "vs-theme-starterkit-abyss",
                "label": "Abyss",
                "uiTheme": "vs-dark",
                "path": "./themes/Abyss.tmTheme"
            },
            {
                "id": "vs-theme-starterkit-dimmed-monokai",
                "label": "Dimmed Monokai",
                "uiTheme": "vs-dark",
                "path": "./themes/dimmed-monokai.tmTheme"
            },

            /* 中略 */

            /* ダウンロードしたカラーテーマの情報を追加します。 */
            {
                "id": "vs-theme-starterkit-textmate",
                "label": "Textmate",
                "uiTheme": "vs",
                "path": "./themes/textmate.tmTheme"
            }
        ]
    }
}

JSONのキー	概要
id	カラーテーマを識別するための文字列です。CSSでのクラス名にもなります。
label	Color Theme pickerに表示される文字列です。
uiTheme	ベースとなるテーマを選択します。（下表を参照）
path	カラースキーマのファイルパスを指定します。「ticino.plugin.json」からの相対パスでもOKです。

ベースとなるテーマ	uiThemeの値
Light	vs
Dark	vs-dark
High Contrast	hc-black

※バージョン1.0.0以降では、「[Visual Studio Codeのインストールパス]\resources\app\extentions」フォルダーの中に新規にフォルダー（ここでは「theme-textmate」）を作成し、その中に「themes」フォルダーと「package.json」を作成します。作成したthemeフォルダーの中に.tmThemeファイルを入れ、package.jsonファイルは以下のように入力します。
package.json
{
    "name": "theme-textmate",
    "version": "0.1.0",
    "publisher": "",
    "engines": { "vscode": "*" },
    "contributes": {
        "themes": [
            {
                "label": "Textmate",
                "uiTheme": "vs",
                "path": "./themes/textmate.tmTheme"
            }
        ]
    }
}
※また、カラーテーマを識別するための「id」キーが「name」キーに変わっています。

JSONファイルを保存したら、Visual Studio Codeを再起動します。

これでColor Theme pickerから、追加したカラーテーマを選択することができます。

Textmate

3. おわりに

カラーテーマの中身はXML形式なので、自分で1から作ることもできます。また、「TmTheme Editor」などのWebサービスを利用するという手段もあります。

バージョン0.8.0から追加されたカラーテーマ機能で、あなた好みのエディターカラーに仕上げてみるのはいかがでしょう。

それでは、See you next time!

Visual Studio Codeにお好みのカラーテーマを追加してみよう

1. TextMate形式のカラーテーマが利用できます

2. カラーテーマをVisual Studio Codeに追加する

3. おわりに

関連サイト