LoginSignup
23
22

More than 5 years have passed since last update.

Visual Studio Code用カラーテーマの作り方

Posted at

カラーテーマの作成

あらかじめ、カラーテーマを作成しておきます。

カラーテーマの作成は、TmTheme Editorを使うと簡単です。
好みの配色ができたら「ダウンロード」ボタンで適当なファイル名をつけて保存しておきます(拡張子は.tmTheme)。

テンプレート作成

Yo Code - Extension Generatorをインストールします。

$ npm install -g yo generator-code

インストールができたら、

$ yo code

とすると、どの拡張機能を作成するか訊かれますので、"New Color Theme"を選びます。

スクリーンショット 2016-12-25 10.08.15.png

次に、カラーテーマのファイル名を訊かれるので、さきほど保存しておいたファイルを指定します。

スクリーンショット 2016-12-25 10.09.16.png

その後もextensionの名前などを訊かれますので適当に入力します。
"publisher name"はMarketPlaceに公開するときにはMicrosoftのアカウント名が必要になりますが、そうでなければ適当でよいでしょう。

ローカルにインストール

テーマが出来たら、~/.vscode/extensions/にフォルダごとコピーするだけです。

あとはVisual Studio Codeを再起動すれば、「Codeメニュー」 -> 「基本設定」 -> 「配色テーマ」で作成したテーマを選択可能になります。

スクリーンショット 2016-12-24 23.41.07.png

Market Placeに公開

Extension Marketplaceに公開したいときは、vsce - Publishing Tool Referenceを参考にすればできるかと…。

23
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
22