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

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

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

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

#####Python
![python.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/2a85fdf8-ba32-6717-a38c-8cf3eefc360d.png)
#####Java
![java.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/c598974c-09e9-62e1-e1ac-c5c475b9e19a.png)
#####HTML
![html.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/ca6d350f-189b-6a52-a0a7-0aed849808fc.png)
#####CSS
![css.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/691e2e09-d4e7-e0cf-6823-1e6f5e7ba6a7.png)
#####JavaScript
![js.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/65f6c026-4816-47eb-ace4-635f4bd9b758.png)

###オリジナル(自分用)カラーテーマの作成
1. 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にしてます)
![copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/9f332544-965c-2f4f-55a0-e0ebf10b3045.png)

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の中身を下記の画像通りに変更

#####変更前
![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/d42ff106-6853-941e-4111-f1554a4d5bca.png)
#####変更後
![after.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/9249b24b-8b7c-3f23-c5e1-5a3b209b4236.png)


　3.4 theme-mine/package.nls.jsonの中身のMonokai → Mine
　3.5 vscodeの再起動

これまで正しくできていると、再起動したら以下のようにMineというテーマができているはずです。
あとはmine-color-theme.jsonの変更したい色を変更して再起動すれば、変更できています！

![Mine.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/0fa9fd50-6f2e-03d9-bf00-5976b7dfe24b.png)


#僕のカスタマイズテーマ
以下に僕がカスタマイズした後の画像を貼ります。

#####Python
![pythonA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/3d5e3b8e-ee58-53f9-4238-5157f9bd0607.png)
#####Java
![javaA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/29cac2ce-e45b-2527-a441-412d36296710.png)
#####HTML
![htmlA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/329d6703-00d3-aa46-c19c-749ebad08c30.png)
#####CSS
![cssA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/061b7a4a-d7de-caf9-ed5a-2636c53f5cde.png)
#####JavaScript
![jsA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520861/5c4ec73b-1274-d87e-65d6-59ff098d2b48.png)

#終わりに
今回はベースとなるカラーテーマを細かくカスタマイズする方法を書きました。
今使っているカラーテーマに満足していない方は、ぜひ自分の見やすい色にカスタマイズしてみては如何でしょうか。