こんにちは。菜笑[なえ] (@nae310_)です。
Visual Studio Code(VSCode) の配色をもっとカッコよく！見やすく！好きなものに変えたい！と思っていませんか？
今回はVisual Studio Code(VSCode) のカラーテーマの変更方法について解説していきます。
びっくりするほど簡単なので、ぜひ好きなテーマにして幸せな気持ちでプログラミングをしましょう。
では、以下の内容で書いていきます。
- 好きなカラーテーマを決める
- VSCodeのカラーテーマを変更する
- おすすめテーマ【3つ】
- おわりに
好きなカラーテーマを決める
まずは自分の好きなカラーテーマを決めましょう。
こちらにアクセスして好きなテーマを探してください。
きっと種類がありすぎてビックリするはずです。
3つのエリアに分かれているのですが、それぞれこんな感じです。
- Trending themes: トレンドテーマ ［順番は不明］
- Dark themes: 暗めのテーマ [ダウンロードが多い順]
- Light themes: 明るめのテーマ [ダウンロードが多い順]
javascript, css, html と書いてあるところはクリックできます。
それぞれの色味を確認してみてください。
VSCodeのカラーテーマを変更する
好きなテーマが決まったら、さっそくVSCodeに反映していきましょう。
まずは選んだテーマにカーソルをのせて「View Extension」をクリックします。
モーダルが開くので「Open in VSCode」をクリックします。
すると「Visual Studio Code.appを開きますか？」と聞かれるので、「Visual Studio Code.appを開く」を選択してください。
VSCodeのアプリで選んだテーマが表示されました。
みどり色のインストールボタンをクリックします。
「配色テーマの選択」というボックスが表示されるので、設定したいテーマの名前を選択します。
もしボックスが表示されなければ、「配色テーマを設定」というボタンをクリックすれば表示されます。
これでカラーテーマの変更ができました！
もしうまく変更されなければ、一度VSCodeを再起動してみてください。
おすすめテーマ【3つ】
テーマは完全に好みだと思うんですが、自分のオススメするテーマを3つ紹介していきます。
自分はいつも暗めのダークテーマを使っているので、明るめのテーマが好みの方はすみません。参考にならないと思います…。
ちなみに現在は、一番最初に紹介している「One Monokai」を愛用しています！
One Monokai
Atom One Dark
Material Dark
おわりに
カラーテーマをずっと見てると、どれも似たりよったりで選べない！となるかもしれません。
そうなったら適当に「これだ！」と思うものにして使ってみてください。
実際に使ってみて
・目が疲れるな。
・色が濃くてチカチカするな。
と感じるようだったら、また別のテーマに変えてみればいいと思います。
無料でこれだけたくさんのテーマが使えるので、ぜひお気に入りのテーマを見つけて、快適にコードを書いていきましょう！
SNS
記事を読んでわからなかった部分などあれば、お気軽にご連絡ください！
