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

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


#1. **TextMate**形式のカラーテーマが利用できます
今までのバージョンでは、デフォルトで用意されている「Light」、「Dark」、「High Contrast」の3つのテーマのみ選択できました。

* Light
![Light](https://qiita-image-store.s3.amazonaws.com/0/78881/654e6352-a774-966d-bee2-ba2712891785.png)

* Dark
![Dark](https://qiita-image-store.s3.amazonaws.com/0/78881/67a4df0a-6cf1-d7ed-79da-91c497b9fb9b.png)

* High Contrast
![High Contrast](https://qiita-image-store.s3.amazonaws.com/0/78881/ef105674-ef10-42b8-e539-1785a6682598.png)

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

* Quiet Light（ベース：Light）
![Quiet Light](https://qiita-image-store.s3.amazonaws.com/0/78881/8db27846-e180-747b-424d-8204b5463eaf.png)

* Monokai（ベース：Dark）
![Monokai](https://qiita-image-store.s3.amazonaws.com/0/78881/47f4595f-1e47-af68-d04e-4e71ab7f2843.png)

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

#2. カラーテーマをVisual Studio Codeに追加する
今回は「[Colorsubline](http://colorsublime.com/)」から、カラーテーマをダウンロードしていきます。

![vsc080-11.PNG](https://qiita-image-store.s3.amazonaws.com/0/78881/5c0e891d-9474-466e-21d9-d016345aee47.png)

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

好きなカラーテーマが決まったら、「Download」ボタンをクリックし、カラーテーマ（ここでは「Textmate」）のファイルをダウンロードします。
![vsc080-12.PNG](https://qiita-image-store.s3.amazonaws.com/0/78881/e3268036-33db-8aa1-f15a-e110871d2329.png)

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

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

```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ファイルは以下のように入力します。

>```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から、追加したカラーテーマを選択することができます。
![vsc080-13.PNG](https://qiita-image-store.s3.amazonaws.com/0/78881/13f3aefc-c4e2-05ba-371c-a4be40aff282.png)

* Textmate
![Textmate](https://qiita-image-store.s3.amazonaws.com/0/78881/bc111df2-e830-94e2-da0b-4a0f4fa2f0cb.png)

#3. おわりに
カラーテーマの中身はXML形式なので、自分で1から作ることもできます。また、「[TmTheme Editor](http://tmtheme-editor.herokuapp.com/)」などのWebサービスを利用するという手段もあります。

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

それでは、See you next time!

#関連サイト
* Windows/Linux/Mac対応の無償コードエディター「Visual Studio Code」v0.8.0が公開  | 窓の杜  
  http://www.forest.impress.co.jp/docs/news/20150911_720731.html
* Visual Studio Code - September Update (0.8.0) | Visual Studio Code - Site Home - MSDN Blogs  
  http://blogs.msdn.com/b/vscode/archive/2015/09/10/visual-studio-code-september-update-0-8-0.aspx