vscodeの配色を変更して快適環境を作ろう

更新:2018.4.12

目次

なぜ

光沢液晶のパソコンでダーク系の配色テーマ設定にしたvscodeを開いたら、映り込みがすごくてライト系のテーマに変えたまではよかったのですが、 マークダウンファイルの見出し行が見づらいカラーになっていたので、変更するしかないと思い、チャレンジしました。

テーマファイルの場所

ベースとなる設定を参考にしながら配色設定を変更したいので、まず、現在使用可能な配色テーマファイルを見つけます。

Windows7の場合は下記の場所にテーマファイルが格納されていました。

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

たとえば、デフォルトで持っているテーマだと下記の場所になります。

C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-defaults\themes

ファイル名はそれっぽい名前が付けられていますので、テキストエディタで開いて見みると良いでしょう。

light_vs.json

今回はこのファイルに書かれている設定を参考に編集します。

準備

配色設定を変更するための準備です。

メニューから、ファイル>基本設定>設定とクリックし、setting.jsonを開きます。

左側の「既定の設定」から下記の部分を見つけます。

// 現在選択している配色テーマで配色とフォント スタイルを上書きします。
"editor.tokenColorCustomizations": {},

カーソルを合わせると鉛筆マークが行の左側に表示されますので、クリックします。

右側の領域に行がコピーされれば準備完了です。

設定変更

マークダウンファイルの見出し行に設定されているカラーを変更します。

設定を上書きするテーマを指定することができ、[Visual Studio Light]テーマを使用している場合は下記のようになります。

"editor.tokenColorCustomizations": {
    "[Visual Studio Light]": {
        "textMateRules": [
            {
                "scope": "markup.heading",
                "settings": {
                    "fontStyle": "bold",
                    "foreground": "#4169E1"
                }
            }
        ]
    },
},

※配色テーマ("[Visual Studio Light]“の部分)の名称が分からない場合は、“editor.tokenColorCustomizations”: {とタイプした後、改行して「"」をタイプすると利用可能なカラーテーマが候補として表示されます。

具体的な設定は、textMateRulesブロックの下に、light_vs.jsonから設定をコピーアンドペーストして編集します。

この部分です。

"scope": "markup.heading",
"settings": {
    "fontStyle": "bold",
    "foreground": "#4169E1" ←設定値を変更した
}

この例では、「# 見出し」の行が、ロイヤルブルーになるようにしています。 「“foreground”: “#4169E1”」この部分が該当箇所です。

同じ要領で変更したい色があれば、現在使用している配色テーマから設定をコピーして、textMateRulesの配列に追加していけば、好みのスタイルに変更できます。

まとめ

配色テーマを作るほどの気合はありませんが、見づらい部分があれば、簡単にカスタマイズ出来るというのは良いことですね。

今回、配色テーマ全体の設定を上書きする形で行いましたが、さらに特定のファイルタイプのときだけ変更することもできそうです。

IT関係関連記事








vmwareまとめ
2017/04/25



これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]