VSCodeのテーマを変更してみよう

VSCodeでは、テーマを変更することができます。開発時により効率的に作業するためにも、テーマの変更方法が知りたい方も多いのではないでしょうか。

本記事ではVSCodeのテーマの変更方法を、丁寧に図解します。手順はそれほど難しくないので、ぜひ一緒にテーマを変更してみましょう。

VSCodeのショートカット一覧！開発作業を効率化する秘訣を解説

VSCodeのテーマは大まかに3種類ある

VSCodeのテーマは3つあり、それぞれのテーマは変更可能です。 ここからは、それぞれのテーマについて解説しますので、まずは各テーマの違いについて把握しましょう。

まずは、カラーテーマについて説明します。カラーテーマはエディターエリアに記述するコードの色や、 ハイライトというコードの強調表示の色を管理しているテーマです。このテーマは拡張機能を使って好みのテーマに適用できます。 

【図】：カラーテーマの例 【参考】：Visual Studio Code公式 - テーマ

次にファイルアイコンテーマについて解説します。ファイルアイコンテーマは下図の赤枠で囲われているようなファイルのアイコンを管理しているテーマです。 こちらも新しいファイルアイコンのテーマを自分で追加したりカスタマイズしたりすることができます。

【図】：ファイルアイコンの例 【参考】：Visual Studio Code公式 -  テーマ

最後に解説するのが製品アイコンのテーマです。 下図の赤枠にあるようなステータスバーやエディターの折りたたみアイコンなどのアイコンが対象です。こちらも設定をすれば新しく製品アイコンのテーマを追加することができます。

【図】：製品アイコンの例 【参考】：Visual Studio Code公式 - テーマ

テーマ別の追加方法

ここからは、それぞれのテーマの追加方法について解説します。3つのテーマの中から変更したいものを決めたら、記事を参考にして対象のテーマを変更してみましょう。

まずはカラーテーマの変更方法について解説します。画面上部のメニューバーから「ファイル」を選択し、「ユーザー設定」から「配色テーマ」を選択します。

【図】：カラーテーマの選択画面

画面上部にいくつか候補が表示されますので、ここからテーマの変更をしましょう。下図の赤枠にあるように、カラーテーマはライトテーマと、ダークテーマがあります。

【図】：カラーテーマの候補が出ている状態

目に優しい、または好みのデザインなど人それぞれ好みがあると思いますので、好みのテーマを選択しましょう。選択すると、すぐに変更が反映されますので色が変わったことが確認できれば変更は完了です。

元のテーマに戻したいときには、変更すれば先ほどの入力窓の「既定」と表示されているテーマを選択すれば元に戻ります。

次にファイルアイコンのテーマの変更方法を紹介します。カラーテーマと同様に、画面上部のメニューバーから「ファイル」を選択し、「ユーザー設定」から「ファイルアイコンのテーマ」を選択します。

【図】：ファイルアイコンテーマの選択画面

画面上部に候補が表示されますので、変更したいものをクリックすると、変更が適用されます。またファイルアイコンの表示をなくしたい場合も、こちらから設定が可能です。

また、その他のファイルアイコンのテーマをインストールを選択すると、拡張機能の一覧が表示されます。これらからインストールをしてVSCodeを再読み込みすれば変更完了です。 

製品アイコンのテーマを変更するには他の2つのテーマと同様に、画面上部のメニューバーから「ファイル」を選択します。そこから「ユーザー設定」から「製品アイコンのテーマ」を選択します。

【図】：製品アイコンテーマの選択画面

選択すると、画面上部に入力窓が表示されますので、ここからプラスボタンのある「その他のProduct Iconテーマを参照する」を選択しましょう。すると候補が表示されますので、こちらから好みのものを選択してみましょう。

【図】：製品アイコンテーマの候補が表示されている画面

また、製品アイコンを変更後は、VSCodeの再読み込みが必要です。変更が上手く行かない場合には、再読み込みを試してください。

ちなみにご自身で1から新しいアイコンを追加したい場合には、「package.json」ファイルの中の、contributes属性でpathを編集すると追加できます。詳細に関しては、Visual Studio Codeの公式サイトを参考にしてみてください。

【参考】：Visual Studio Code公式 - 製品アイコンのテーマ

おすすめのカラーテーマを3つご紹介

ここからは、おすすめのカラーテーマを紹介します。カラーテーマには、背景色が暗い色を使用した「ダークテーマ」と明るい色合いの「ライトテーマ」があります。今回はどちらも合わせて紹介しますので、テーマ選びの参考にしてください。

この「One Monokai Theme」は、160万以上もインストールされた人気のダークテーマです。読みやすい配色で、落ち着いた色合いが特徴的です。

【図】：One Monokai Theme適用時の画面

大切なものは赤字で表示されますので、とてもコードを読みやすく作業もはかどりそうです。

【参考】：Microsoft公式 - One MonokaiテーマTheme

こちらはその名の通りGitHubが提供しているダークテーマです。9種類ものテーマが展開されており、拡張機能からインストールすると好きな配色を選べます。

【図】：GitHub Themeの「GitHub Dark Dimmed」適用時の画面

ちなみに現在は9種類のうち2種類は、頻繁に更新されない可能性があり推奨されていません。そのため「Beta」と書かれたものは選択しないことをおすすめします。

【参考】：Microsoft公式 - GitHub テーマ

【図】：「Kary Pro Colors Light」適用時の画面 【参考】：Microsoft公式 - Kary Pro Colorsテーマ

カラーテーマはカスタマイズも可能

カラーテーマは、ワークベンチの色やエディターの構文のハイライトについても自分の好きなカラーコードを設定することができます。より効率的に開発をするため、好みのVSCodeに変更したい方は、これからご紹介するカスタマイズ方法を参考にしてください。

まずはワークベンチの色を変更していきましょう。カラーテーマをカスタマイズする時には 「settings.json」という設定ファイルを編集しますので、まずはそのファイルを開きます。settings.jsonの開き方は 画面上部メニューバーのファイルからユーザー設定を選択し、設定を選択します。

設定の画面上部に検索窓がありますので、こちらに「setting」と入力しましょう。すると「settings.jsonで編集」とリンクが表示されますので、クリックしてファイルを開きます。

またショートカットキーの「Control」＋「P」または「コントロール 」＋「P」を押すと、コマンドパレットが開きます。こちらの検索窓からファイルを検索しても結構です。

【図】：コマンドパレットを開いた状態の画面

「settings.json」のファイルを開いたら、「workbench.colorCustomizations」などのコードを追加します。コードの詳細は、Visual Studio Codeの公式サイトを参考にコードを記述してください。

ここでは例として、アクティビティーバーの中でアクティブになっているアイコンの背景色を変更します。例では、以下のようにコードを記述します。

 "workbench.colorCustomizations": {
  "activityBar.activeBackground": "#ff0000"
  }

【参考】：Visual Studio Code公式 - カラーテーマ

ハイライトを変更する場合にも、ワークベンチと同様に「settings.json」の編集が必要です。コマンドパレットなどを開いて「settings.json」のファイルを開き、特定の構文を入れる必要があります。

例えばトークンのハイライトの設定をオーバーライドしたい場合には、以下のように記述します。

 "editor.semanticTokenColorCustomizations": {
        "enabled": true
}

こちらも構文の詳細は、Visual Studio Codeの公式サイトから確認できます。カスタマイズをされる方は構文を追加しましょう。

【参考】：Visual Studio Code公式 - カラーテーマ

VSCodeのテーマを変更すれば作業効率も見込める

VSCodeは3つのテーマが変更可能でしたが、それぞれのカスタマイズの変更も簡単にできると分かりました。また、カラーテーマについてはカスタマイズも設定ファイルから簡単に行えますので、設定はそれほど手間ではないでしょう。

開発時により快適に作業を進めるためにも、ぜひ本記事を参考にしつつテーマの変更をしてみてください。

VS Code Serverが登場！インストール方法や使い方・開発方法を解説

VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介