MENU

先日、「VS CodeをSublime Textのように使う」というメモを公開したのですが、VS CodeのMonokaiが少しSublime Textのものと違うことに気づきましたので、今回もできるだけSublimeに寄せていきます。

流れとしては以下。

  1. デフォルトテーマのMonokaiを元に自作テーマを作成する
  2. 色が気にくわない部分を探し、変更する

また、個人的に色が気に食わなかったのは以下の2点。

  1. PHPタグが赤色 (Sublime Textでは白)
  2. 関数名が緑色 (Sublime Textでは青)

今回は、この2点の色をカスタマイズしていきます。

目次

テーマファイルの場所について

まずはMonokaiなどのテーマファイルがどこにあるのかを探します。

MacとWindowsでパスが違うのでそれぞれ紹介します。

Macの場合

/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/

上記ファイルの中に、vscodeがデフォルトで用意してくれている色んなテーマファイルなどがあります。

この中に「theme-monokai」というファイルがあるはずです。

Windowsの場合

C:\Program Files\Microsoft VS Code\resources\app\extensions\

上記ファイルの中に、同じように「theme-monokai」というファイルがあるはずです。

テーマファイルを拡張機能フォルダにコピーする

先ほど見つけてきた「theme-monokai」というファイルを、拡張機能用に用意されているフォルダにコピペします。

先ほどのテーマファイルがあった場所にそのままコピペして編集したりしてもいいのですが、この中のファイルはVS Codeをアップデートする度に初期化されます

一度そのせいでテーマを作り直すはめになりました。笑

ですので、アップデートしても何も影響しないフォルダに置いておく必要があります。

Macの場合

~/.vscode/extensions/

が拡張機能用フォルダです。この中に「theme-monokai」をコピペしましょう。

「~」はユーザーのホームディレクトリです。別の書き方をすれば、「/Users/ユーザー名/.vscode/extensions/」となります。

Windowsの場合

%USERPROFILE%\.vscode\extensions

が拡張機能用フォルダです。この中に「theme-monokai」をコピペしましょう。

「%USERPROFILE%」はユーザーのホームディレクトリです。よくわからなくてもエクスプローラーでコピペすればアクセスできると思いますので、そのまま上記パスをコピペしてください。

コピーしてきたテーマファイルを編集する

まずは同じ名前で被らないように名前を変えましょう。

コピーしてきた「theme-monokai」を「theme-monokai-customized」とでも変更しましょう。なんでもいいです。

READMEは必要ないので削除して構いません。

テーマファイルの情報を変更する

フォルダを開くとpackage.jsonというファイルがあるので、これを編集します。

package.jsonの中身

{
	"name": "theme-monokai", //1. ここの名前を変える
	"version": "0.1.0",
	"publisher": "vscode",
	"engines": { "vscode": "*" },
	"contributes": {
		"themes": [
			{
				"label": "Monokai",  //2. ここの名前を変える
				"uiTheme": "vs-dark",
				"path": "./themes/monokai-color-theme.json"
			}
		]
	}
}

上記の1,2の箇所の名前を変えましょう。

  1. -> theme-monokai-customized
  2. -> Monokai-Customized

私は上記のように変更しました。

カラーリングの変更

さて、本題のカラーリングの変更はここからです。

テーマフォルダの中にさらに「theme」というフォルダがあり、その中に「monokai-color-theme.json」というjsonファイルがあります。

この中に、これはこの色、あれはあの色、みたいな設定がずらーーっと記述されているので、それを編集します。

PHPタグの赤色を変更する

まずはこれから変えてみましょう。

monokai-color-theme.json」を開き、「Template Definition」で検索をかけてみてください。

以下のような場所があるかと思いますので、その中の色を変更してください。

{
  "name": "Template Definition",
  "scope": [
    "punctuation.definition.template-expression",
    "punctuation.section.embedded"
  ],
  "settings": {
  "foreground": "#F92672"  // <- これが赤色なので、白色(#FFFFFF)に変更
  }
},

 

関数名の緑色を変更する

関数名は「Function Name」という項目になります。

{
  "name": "Function name",
  "scope": "entity.name.function",
  "settings": {
    "fontStyle": "",
    "foreground": "#A6E22E"  //<- これが緑色なので青色 ("#66D9EF") に変更
  }
},

自作テーマを有効化する

ファイルを変更し、保存すればあとはVS Codeで配色テーマを新しく作ったものに変更するだけです。

今回の例でいうと、「Monokai-Customized」というテーマが新しく選択可能になっていると思います。

image

うまく表示されていない場合はVS Codeを再起動してみてください。

また、テーマを選択しても反映されない場合はjsonファイルが正しく記述できていない可能性があるので、不要な「 , 」やスペースが入っていないかチェックしてみてください。

おわりに

単純に既存の配色テーマをカスタマイズするだけならばもっと簡単な方法があるかもしれないですが、今回は標準テーマをコピペしてそれを元に自作テーマを作る、という方法をとりました。

これを機に、1から自作テーマの開発をしてみてもいいかもしれないですね!

- Thank you for reading this to the end. -
TOPへ Top