【VSCode】カラーテーマを変更して好きな配色にする方法 [Mac]

vscode

こんにちは。菜笑[なえ] (@nae310_)です。

Visual Studio Code(VSCode) の配色をもっとカッコよく!見やすく!好きなものに変えたい!と思っていませんか?

今回はVisual Studio Code(VSCode) のカラーテーマの変更方法について解説していきます。
びっくりするほど簡単なので、ぜひ好きなテーマにして幸せな気持ちでプログラミングをしましょう。

では、以下の内容で書いていきます。

  • 好きなカラーテーマを決める
  • VSCodeのカラーテーマを変更する
  • おすすめテーマ【3つ】
  • おわりに

好きなカラーテーマを決める

まずは自分の好きなカラーテーマを決めましょう。

こちらにアクセスして好きなテーマを探してください。
きっと種類がありすぎてビックリするはずです。

VSCodeThemes

3つのエリアに分かれているのですが、それぞれこんな感じです。

  • Trending themes: トレンドテーマ [順番は不明]
  • Dark themes: 暗めのテーマ [ダウンロードが多い順]
  • Light themes: 明るめのテーマ [ダウンロードが多い順]

javascript, css, html と書いてあるところはクリックできます。
それぞれの色味を確認してみてください。

好きなカラーテーマを決める

VSCodeのカラーテーマを変更する

好きなテーマが決まったら、さっそくVSCodeに反映していきましょう。

まずは選んだテーマにカーソルをのせて「View Extension」をクリックします。

VSCodeのカラーテーマを変更する

モーダルが開くので「Open in VSCode」をクリックします。
すると「Visual Studio Code.appを開きますか?」と聞かれるので、「Visual Studio Code.appを開く」を選択してください。

VSCodeのカラーテーマを変更する

VSCodeのアプリで選んだテーマが表示されました。
みどり色のインストールボタンをクリックします。

VSCodeのカラーテーマを変更する

「配色テーマの選択」というボックスが表示されるので、設定したいテーマの名前を選択します。
もしボックスが表示されなければ、「配色テーマを設定」というボタンをクリックすれば表示されます。

VSCodeのカラーテーマを変更する

これでカラーテーマの変更ができました!

もしうまく変更されなければ、一度VSCodeを再起動してみてください。

おすすめテーマ【3つ】

テーマは完全に好みだと思うんですが、自分のオススメするテーマを3つ紹介していきます。

自分はいつも暗めのダークテーマを使っているので、明るめのテーマが好みの方はすみません。参考にならないと思います…。

ちなみに現在は、一番最初に紹介している「One Monokai」を愛用しています!

One Monokai

One Monokai

One Monokai
One Monokai

Atom One Dark

Atom One Dark

Atom One Dark
Atom One Dark

Material Dark

Material Dark

Material Dark
Material Dark

おわりに

カラーテーマをずっと見てると、どれも似たりよったりで選べない!となるかもしれません。
そうなったら適当に「これだ!」と思うものにして使ってみてください。

実際に使ってみて
・目が疲れるな。
・色が濃くてチカチカするな。
と感じるようだったら、また別のテーマに変えてみればいいと思います。

無料でこれだけたくさんのテーマが使えるので、ぜひお気に入りのテーマを見つけて、快適にコードを書いていきましょう!

SNS

記事を読んでわからなかった部分などあれば、お気軽にご連絡ください!

Twitter:@nae310_
Instagram:310nae