More than 5 years have passed since last update.

Visual Studio Codeのカラーテーマを好きなようにカスタマイズする方法

VSCode

Posted at 2020-03-27

はじめに

今回はvscodeのカラーテーマを自分用に細かくカスタマイズしようと思います。
ここでは、作成の仕方と僕が作ったテーマの紹介のみをします。細かい内容は僕もまだ理解しきってないので、気が向けば、また投稿しようと思います。僕のパソコンは Macbook Air なので、MacOS基準で話していきます。

カラーテーマの作成

ベースのカラーテーマの選択

まず、最初から作るのは面倒臭いかつしんどいので、ベースとなるカラーテーマを選択します。僕は、Monokai Pro (Filter Octagon)をベースとしました。
僕はこのテーマの中でも、PythonやJavaScriptの関数とメソッド、Javaの型名、HTMLの属性や属性名の色合いがあまり好みではなかったので変更することにしました。

色合いとして各言語は以下のような感じです。
(Python,Java,HTML,CSS,JavaScript)

Python

Java

HTML

CSS

JavaScript

オリジナル(自分用)カラーテーマの作成

vscodeのアプリのextensionsフォルダへ移動して、フォルダを開く

terminal

$ cd
$ cd ./../../Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/ 
(もしくは $ cd ./Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/)
$ open .

2.ベースとなるカラーテーマをフォルダごと複製
僕はここで、Monokai Pro (Filter Octagon)にしています。

(複製したので元のカラーテーマがあるはず何ですが、改めて探すとなかったのでMonokai Pro系のカラーテーマは別フォルダにあるかもしれません。なので、Monokai Pro系のカラーテーマをベースにしたい時はすいませんがどうにか探してください。それ以外の人はこのフォルダから利用してもらったらいいです。また、見つかれば記事に追加しようと思います。)

以下のようにフォルダごとコピー(代わりとして、Monokaiにしてます)

3.指定した箇所の名前を好きなテーマ名に変更(今回はmineにします。)
　3.1 theme-monokaiのコピー → theme-mine
　3.2 theme-mine/theme/monokai-color-theme.json → theme-mine/theme/mine-color-theme.json
　3.3 theme-mine/package.jsonの中身を下記の画像通りに変更