VSCode

VSCodeのテーマおすすめ10選!自作テーマの作り方も合わせてご紹介

テーマ変更で作業効率と快適性を向上できる

VSCode(Visual Studio Code)のテーマを変更することで、見た目の好みだけでなく、コードの読みやすさを向上でき、効率的に、かつ快適に作業を進められます。

本記事では、テーマのインストールからおすすめテーマ紹介、自作テーマの作り方などを詳しく解説します。

VSCodeテーマのインストール手順

VSCodeで新しいテーマを使いたい場合は、以下の手順でインストールします。

STEP1:拡張機能ビューにアクセス

左サイドバーにある「拡張機能」アイコン(四角が重なったような形)をクリックします。

拡張機能をクリック

STEP2:テーマを検索

検索バーにインストールしたいテーマの名前を入力します。例えば、「One Dark Pro」と入力すると、そのテーマに関連する拡張機能が表示されます。

テーマの名前を入力

STEP3:テーマをインストール

検索結果から希望のテーマを見つけたら、「インストール」ボタンをクリックします。テーマがVSCodeにインストールされます。

VSCodeにインストール

VSCodeテーマの変更方法

STEP1:コマンドパレットを開く

VSCodeのメイン画面でショートカットキーを使用してコマンドパレットを開きます。

Windows/Linux:Ctrl + Shift + P

Mac:Cmd + Shift + P

コマンドパレット

STEP2:テーマ設定を検索する

コマンドパレットに表示されたテキストボックスに「テーマ」と入力し、「Color Theme」(配色テーマ)を選択します。

配色テーマ

STEP3:テーマを選択する

使用可能なテーマのリストが表示されますので、好みのテーマを選びます。

テーマのリスト

STEP4:テーマを適用する

好きなテーマを見つけたら、そのテーマをクリックして適用します。テーマが即座にVSCodeに適用され、エディターの見た目が変わります。

テーマをクリックして適用

VSCodeおすすめテーマ10選

定番!おすすめ人気テーマ5選

One Dark Pro

「One Dark Pro」は、モダンなデザインの人気テーマです。コードの可読性を高める洗練された色使いが特徴です。

One Dark Pro

Dracula Official

「Dracula Official」は、ダークテーマの中でも特に目を引く鮮やかな色使いが特徴的です。コードの区別がしやすく、特に夜間の作業に最適です。

Dracula Official

Ayu

「Ayu」は、暖かみのある色合いが特徴のテーマです。3種類のカラーバリエーション(ライト、ミラージュ、ダーク)があり、好みに応じて選べます。

Ayu

Shades of Purple

「Shades of Purple」は、パープルを基調とした鮮やかなテーマです。エディターをユニークでスタイリッシュな見た目に変えたい方におすすめです。

Shades of Purple

Material Theme

「Material Theme」は、豊富なカラーから選べる、シンプルでカスタマイズ性が高いテーマです。

Material Theme

目を大切に!目に優しいテーマ3選

Solarized Light+

「Solarized Light+」は、テーマ「Solarized」のライトバージョンです。バランスの取れた色使いが特徴的なテーマです。

Solarized Light

Quiet Light for VSC

「Quiet Light for VSC」は、柔らかい色合いで構成されており、目にとても優しいテーマです。

Quiet Light

Monokai Dimmed Light

テーマ「Monokai Dimmed」のライトバージョンです。コードの色分けは明瞭でありながらも、全体的にソフトな色使いが特徴的なテーマです。

Monokai Dimmed Light

見た目も楽しめる!かわいいテーマ2選

Sodagreen Theme

「Sodagreen Theme」は、淡いグリーンが特徴で、全体的に落ち着いた優しい雰囲気のテーマです​。

Sodagreen Theme

soft era

「soft era」は、パステルピンクとブルーが特徴的で、可愛らしい雰囲気のテーマです​。

soft era

VSCodeで自作テーマを作る方法

VSCodeでは、自作テーマを作ることができます。自分でテーマを作ってみたい方は以下の記事を参考にしてみてください。

テーマを変更してコーディングを楽しもう!

今回は、VSCodeのおすすめのテーマや自作テーマの作り方など紹介しました。テーマを自分好みに変更することで、作業効率だけでなく、楽しみにながらコーディングすることができます。完全オリジナルのテーマを使ってみたい方は、ぜひ自作テーマの作成にもチャレンジしてみてください。