テーマ変更で作業効率と快適性を向上できる
VSCode(Visual Studio Code)のテーマを変更することで、見た目の好みだけでなく、コードの読みやすさを向上でき、効率的に、かつ快適に作業を進められます。
本記事では、テーマのインストールからおすすめテーマ紹介、自作テーマの作り方などを詳しく解説します。
VSCodeテーマのインストール手順
VSCodeで新しいテーマを使いたい場合は、以下の手順でインストールします。
STEP1:拡張機能ビューにアクセス
左サイドバーにある「拡張機能」アイコン(四角が重なったような形)をクリックします。

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

STEP3:テーマをインストール
検索結果から希望のテーマを見つけたら、「インストール」ボタンをクリックします。テーマが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」は、モダンなデザインの人気テーマです。コードの可読性を高める洗練された色使いが特徴です。

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

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

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

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

目を大切に!目に優しいテーマ3選
Solarized Light+
「Solarized Light+」は、テーマ「Solarized」のライトバージョンです。バランスの取れた色使いが特徴的なテーマです。

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

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

見た目も楽しめる!かわいいテーマ2選
Sodagreen Theme
「Sodagreen Theme」は、淡いグリーンが特徴で、全体的に落ち着いた優しい雰囲気のテーマです。

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

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