Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

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

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

  • Light
    Light

  • Dark
    Dark

  • High Contrast
    High Contrast

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

  • Quiet Light(ベース:Light)
    Quiet Light

  • Monokai(ベース:Dark)
    Monokai

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

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

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

vsc080-11.PNG

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

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

ダウンロードしたら、その.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から、追加したカラーテーマを選択することができます。
vsc080-13.PNG

  • Textmate Textmate

3. おわりに

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

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

それでは、See you next time!

関連サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away