VSCodeのカラーテーマの詳細をカスタマイズする方法

Advertisement

最近、巷で噂のVSCode(Visual Studio Code) を使い始めています。なかなかいですねw

で、カラーテーマはMonokaiにしてるんですが、いまいちアクティブなタブが判別しづらいんですね。デフォルトだとこんな感じです。

VSCodeのMonokaiテーマのタブ表示

それで、カラーテーマの細かいカスタマイズをする方法を探してみました。

やっぱり、あるんですね。

カラー設定のカスタマイズ方法

VSCodeのカラーテーマのカスタマイズの方法は以下の通りです。

まず、 ⌘ + , で設定画面(Settings)を出します。

VSCodeの設定画面

一番上にある検索ボックスで「color」と入力します。「Workbench: Color Customization」というセクションがあるので「Edit in settings.json」をクリックします。

VSCodeの設定画面で「color」で検索するところ

エディターが出てくるので「workbench.colorCustomizations」という設定を追加します。ユーザ設定を変更する場合は「USER SETTINGS」、Workspaceごとにカスタマイズする場合は「WORKSPACE SETTINGS」のタブに設定を加えます。

VSCodeのユーザ設定(settings.json)の編集画面

他に何も設定が入っていない場合は、以下を丸々追加するとアクティブなタブの下にボーダーを入れることができます。

{
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

僕の場合は、すでにいくつか設定を変更していたので以下のようになりました。

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Monokai",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
	"editor.minimap.enabled": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

設定変更後

設定を変更した後は以下のような見た目になりました。デフォルトよりはマシなんじゃないかなぁ、とw

VSCodeのMonokaiテーマのタブ表示のカスタマイズをした画面

設定できる色の一覧

設定できる色の一覧はVS CodeのDocsで見られます。

タブのテキストの色も変えたいんですが、それは見つけられませんでした…。

ちなみに、設定変更の説明もVS CodeのDocsにありました。

さいごに

ずっとAtomエディターを使ってきたんですが、巷で噂のエディターを試してみたかったのでVSCodeを使ってみています。ここ数日使ってますが、サクサク動くし拡張機能(Extensions)やカラーテーマも充実していていいですね。

他にも色々な便利機能 がたくさんありそうなので、これから試していくのが楽しみです。

ということで、しばらくはVSCodeを使ってみようと思います。

About the author

Rriverの竜(りょう)です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら

記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です