テーマ変更で作業効率と快適性を向上できる
VSCode(Visual Studio Code)のテーマを変更することで、見た目の好みだけでなく、コードの読みやすさを向上でき、効率的に、かつ快適に作業を進められます。
本記事では、テーマのインストールからおすすめテーマ紹介、自作テーマの作り方などを詳しく解説します。
VSCodeテーマのインストール手順
VSCodeで新しいテーマを使いたい場合は、以下の手順でインストールします。
STEP1:拡張機能ビューにアクセス
左サイドバーにある「拡張機能」アイコン(四角が重なったような形)をクリックします。
![拡張機能をクリック](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_600,h_344/https://30s-proglife.com/wp-content/uploads/2024/04/05-4.jpg)
STEP2:テーマを検索
検索バーにインストールしたいテーマの名前を入力します。例えば、「One Dark Pro」と入力すると、そのテーマに関連する拡張機能が表示されます。
![テーマの名前を入力](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_559,h_322/https://30s-proglife.com/wp-content/uploads/2024/04/06-3.jpg)
STEP3:テーマをインストール
検索結果から希望のテーマを見つけたら、「インストール」ボタンをクリックします。テーマがVSCodeにインストールされます。
![VSCodeにインストール](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_517,h_148/https://30s-proglife.com/wp-content/uploads/2024/04/07-4.jpg)
VSCodeテーマの変更方法
STEP1:コマンドパレットを開く
VSCodeのメイン画面でショートカットキーを使用してコマンドパレットを開きます。
Windows/Linux:Ctrl + Shift + P
Mac:Cmd + Shift + P
![コマンドパレット](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_499,h_214/https://30s-proglife.com/wp-content/uploads/2024/04/01-3.jpg)
STEP2:テーマ設定を検索する
コマンドパレットに表示されたテキストボックスに「テーマ」と入力し、「Color Theme」(配色テーマ)を選択します。
![配色テーマ](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_508,h_217/https://30s-proglife.com/wp-content/uploads/2024/04/02-4.jpg)
STEP3:テーマを選択する
使用可能なテーマのリストが表示されますので、好みのテーマを選びます。
![テーマのリスト](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_499,h_367/https://30s-proglife.com/wp-content/uploads/2024/04/03-6.jpg)
STEP4:テーマを適用する
好きなテーマを見つけたら、そのテーマをクリックして適用します。テーマが即座にVSCodeに適用され、エディターの見た目が変わります。
![テーマをクリックして適用](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_600,h_325/https://30s-proglife.com/wp-content/uploads/2024/04/04-4.jpg)
VSCodeおすすめテーマ10選
定番!おすすめ人気テーマ5選
One Dark Pro
「One Dark Pro」は、モダンなデザインの人気テーマです。コードの可読性を高める洗練された色使いが特徴です。
![One Dark Pro](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_520,h_265/https://30s-proglife.com/wp-content/uploads/2024/04/08-6.jpg)
Dracula Official
「Dracula Official」は、ダークテーマの中でも特に目を引く鮮やかな色使いが特徴的です。コードの区別がしやすく、特に夜間の作業に最適です。
![Dracula Official](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_532,h_250/https://30s-proglife.com/wp-content/uploads/2024/04/09-4.jpg)
Ayu
「Ayu」は、暖かみのある色合いが特徴のテーマです。3種類のカラーバリエーション(ライト、ミラージュ、ダーク)があり、好みに応じて選べます。
![Ayu](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_541,h_253/https://30s-proglife.com/wp-content/uploads/2024/04/10-3.jpg)
Shades of Purple
「Shades of Purple」は、パープルを基調とした鮮やかなテーマです。エディターをユニークでスタイリッシュな見た目に変えたい方におすすめです。
![Shades of Purple](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_538,h_253/https://30s-proglife.com/wp-content/uploads/2024/04/11-6.jpg)
Material Theme
「Material Theme」は、豊富なカラーから選べる、シンプルでカスタマイズ性が高いテーマです。
![Material Theme](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_541,h_247/https://30s-proglife.com/wp-content/uploads/2024/04/12-1.jpg)
目を大切に!目に優しいテーマ3選
Solarized Light+
「Solarized Light+」は、テーマ「Solarized」のライトバージョンです。バランスの取れた色使いが特徴的なテーマです。
![Solarized Light](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_535,h_250/https://30s-proglife.com/wp-content/uploads/2024/04/13-1.jpg)
Quiet Light for VSC
「Quiet Light for VSC」は、柔らかい色合いで構成されており、目にとても優しいテーマです。
![Quiet Light](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_532,h_253/https://30s-proglife.com/wp-content/uploads/2024/04/14-1.jpg)
Monokai Dimmed Light
テーマ「Monokai Dimmed」のライトバージョンです。コードの色分けは明瞭でありながらも、全体的にソフトな色使いが特徴的なテーマです。
![Monokai Dimmed Light](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_529,h_250/https://30s-proglife.com/wp-content/uploads/2024/04/15.jpg)
見た目も楽しめる!かわいいテーマ2選
Sodagreen Theme
「Sodagreen Theme」は、淡いグリーンが特徴で、全体的に落ち着いた優しい雰囲気のテーマです。
![Sodagreen Theme](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_538,h_250/https://30s-proglife.com/wp-content/uploads/2024/04/16.jpg)
soft era
「soft era」は、パステルピンクとブルーが特徴的で、可愛らしい雰囲気のテーマです。
![soft era](https://sp-ao.shortpixel.ai/client/to_webp,q_lossy,ret_img,w_538,h_250/https://30s-proglife.com/wp-content/uploads/2024/04/17-1.jpg)
VSCodeで自作テーマを作る方法
VSCodeでは、自作テーマを作ることができます。自分でテーマを作ってみたい方は以下の記事を参考にしてみてください。
テーマを変更してコーディングを楽しもう!
今回は、VSCodeのおすすめのテーマや自作テーマの作り方など紹介しました。テーマを自分好みに変更することで、作業効率だけでなく、楽しみにながらコーディングすることができます。完全オリジナルのテーマを使ってみたい方は、ぜひ自作テーマの作成にもチャレンジしてみてください。