ニアです、こんにちはー！
今回は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」を開き、ダウンロードしたカラーテーマの情報を追加します。
{
"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](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