Visual Studio Codeのテーマ設定とおすすめテーマ集＆自作テーマの作り方

2023 7/02

2023-07-02

この記事では、Visual Studio Code（VSCode）のテーマ設定方法と、おすすめテーマを紹介します。VSCodeの見た目を変えて、コーディング作業をより効率的で楽しいものにしましょう。

VSCodeのテーマ設定方法

VSCodeのテーマを変更するには以下の手順を実行します。

VSCodeを開き、右側のアイコンメニューから拡張機能をクリックして拡張機能パネルを開きます。
入力フォームにテーマ名を入力するか、@category:"themes"でテーマを絞り込みます。
表示されたテーマのインストールボタンを押すとテーマがインストールできます。
テーマをインストールしたら、VSCodeのメニューから「基本設定 – 配色（command+K command+T）」を開き、テーマを選択します。

定番のVSCodeテーマ

定番のテーマは、その使いやすさと見やすさから多くのユーザーに支持されています。

One Dark Pro: Atomというエディターの配色をVSCode用にしたもので、コードも見やすいです。
Dracula Official: 配色が美しいダークテーマです。
Ayu: 3パターンの背景色から選べます。
Jetbrains Dark Theme: 有名なコードエディターであるJetbrainsのWebstormとIntellijIDE風のテーマです。
Sublime Material Theme: SublimeText風のテーマ。LightとDarkの2パターンから選べます。

最近公開されたVSCodeテーマ

最近公開されたVSCodeのテーマの中から、特に注目すべきものをいくつかピックアップしました。

Nord Flat: 落ち着きのあるフラットなテーマ。「Nord」をベースに作成されています。
Tailwind Theme: TailwindCSSのドキュメント風の配色にできるテーマです。
WebStorm Darcula Darker Theme: WebStorm風のテーマ。Darculaは好きだけど背景がグレーっぽいのはちょっと嫌いな人向けです。
Intellij+VsCode Soft Dark Theme: IntelliJ IDEA テーマと VsCode Dark+ テーマの混合で、エディターにソフトな色が追加されています。
Kanagawa Black: 神奈川県の美しい色とフルブラックのエディターを組み合わせたシンプルなテーマです。

VSCodeのかわいいテーマ

VSCodeのテーマは、クールでかっこいいものだけでなく、かわいいテーマもたくさんあります。

Pink Panda Dark: ピンク色がかわいい女の子向けのテーマ。ソフトなダークテーマで目にもやさしいです。
Foodie: オムレツとかケーキとかとにかく可愛くなるテーマ。ちょっと目にはキツそうです。
Kawaine Theme: 全体的には普通のダークテーマですが、配色がすごくいいです。
Kawaii Theme: ピンクメインのダークテーマ。パンダよりやや濃いめです。
Petals Pastels: 全体的にパステルカラーな配色になるテーマ。落ち着いた色で見やすいです。

自作テーマの作り方

自作のVSCodeテーマを作成する方法について説明します。以下の手順に従ってください。

必要なツールのインストール

まずはじめに、Node.jsとGitをインストールします。これらはテーマ作成に必要なパッケージをインストールするために必要です。

次に、npmを使ってYeoman（yoとも呼ばれます）とgenerator-codeをインストールします。これらはVSCodeのテーマ作成に必要なツールです。

npm install -g yo generator-code

テーマプロジェクトの作成

テーマを作成したいディレクトリに移動し、以下のコマンドを実行します。

yo code

これにより、Visual Studio Code Extension (vsce) generatorが起動します。以下の手順に従って設定を行います。

New Color Themeを選択
No, start freshを選択
拡張機能の名前を入力
拡張機能の識別子を入力（例：{publisher-name}.{identifier}）
テーマの短い説明を入力
マーケットプレイスに表示する名前を入力（大文字小文字を区別します）
ベースとなるテーマを選択

これでテーマプロジェクトが作成されました。以下のコマンドを実行して、作成したプロジェクトを開きます。

cd {theme-name}
code .

テーマのカスタマイズ

プロジェクト内にあるthemesフォルダにテーマのJSONファイルがあります。このファイルを開き、デバッガを実行してテーマのカスタマイズを行います。

テーマの公開

テーマの作成が完了したら、次はテーマを公開します。まず、npmを使ってvsce（Visual Studio Code Extensions）をインストールします。

npm install vsce -g

次に、テーマのプロジェクトのためのgitリポジトリを作成し、それを接続します。全てのテーマをpushしたら、package.jsonファイルを開きます。

package.jsonファイル内で、gitリポジトリ、アイコン、作者、マーケットプレイスのデータなどを設定します。

設定が完了したら、vsceを使ってテーマをパッケージ化し、公開します。

vsce package
vsce publish

以上で、自作のVSCodeテーマの作成と公開が完了しました。数分後には、テーマがVisual Studio Marketplaceに表示されます。

詳細なガイドは、以下のリンクを参照してください。

自作のテーマを作成することで、よりパーソナライズされたコーディング環境を作り出すことができます。あなたのテーマが他の開発者にも役立つことを願っています。

まとめ

VSCodeのテーマは、コーディング作業をより効率的で楽しいものにするための重要なツールです。最新のテーマから定番のテーマ、かっこいいものからかわいい感じのものまで、さまざまなテーマを試してみてください。あなたにとって最適なテーマを見つけることで、VSCodeでの作業がさらに快適になることでしょう。

次のステップとして、お気に入りのテーマをインストールし、VSCodeの見た目をカスタマイズしてみてください。また、定期的に新しいテーマをチェックすることで、新たな発見があるかもしれません。