べんりワザ・VSCode を速く使う

おすすめのVSCodeカラーテーマ

コードを書く画面の色を変えるだけで、見やすさも気分も変わります。定番のダーク系からライト系、個性派まで、画面つきで紹介します。

コードを書く画面の色は、あとから好きなだけ変えられます。カラーテーマという拡張機能を1つ入れるだけで、見やすさも気分もがらっと変わります。ここでは定番のテーマを、タイプ別に画面つきで紹介します。

べんりワザ入れておきたいVSCode拡張機能テーマも拡張機能の一種。入れ方の基本はこちら

テーマの切り替え方

  1. 好きなテーマの拡張機能を、Extensionsパネルから Install
  2. Ctrl+K に続けて Ctrl+T（MacはCmd+Kに続けてCmd+T）でテーマ選択画面を開く
  3. 上下キーで選ぶと、その場でプレビューされる。決めたら Enter

入れたテーマがすぐ気に入らなくても、この手順でいつでも他のテーマに切り替えられます。気軽にいくつも試してみましょう。

タイプ1：定番のダーク系テーマ

目が疲れにくく、いちばん選ばれている定番の系統です。

One Dark Pro

世界でもっとも使われているといっていい、青みがかった落ち着いたダークテーマ。

VSCodeのエディタ画面。青みがかった暗い背景に、タグや文字列が青・緑・オレンジなどで色分けされて表示されている
「One Dark Pro」で検索すると出てくるページ。派手すぎず読みやすく、迷ったらまずこれで間違いありません。

Dracula Official

紫を基調にした、コントラストのはっきりしたダークテーマ。

VSCodeのエディタ画面。濃い紫がかった暗い背景に、ピンクや黄色、緑の文字がくっきりと浮かび上がっている
「Dracula Official」で検索すると出てくるページ。色の差がはっきりしていて、タグや文字列の種類を見分けやすいです。

タイプ2：目にやさしいライト系テーマ

明るい部屋や昼間の作業では、背景が白系のテーマのほうが見やすいこともあります。

GitHub Theme

GitHub公式が出している、シンプルで見慣れた配色のテーマ。

VSCodeのエディタ画面。白い背景に、黒・青・紫の文字ですっきりとコードが表示されている
「GitHub Theme」で検索すると出てくるページ。ダーク版・ライト版の両方が1つの拡張機能に含まれていて、切り替えて使えます。

Ayu

淡いベージュを基調にした、目にやさしいライト系テーマ。

VSCodeのエディタ画面。薄いベージュ色の背景に、やわらかい色合いの文字でコードが表示されている
「Ayu」で検索すると出てくるページ。真っ白ではないやわらかい背景色で、長時間の作業でも目が疲れにくいです。

タイプ3：個性が光るテーマ

配色そのものを楽しみたい人向けの、雰囲気のあるテーマです。

Night Owl

夜空のような紺色を背景に、星のような彩度の高い文字色が映えるテーマ。

VSCodeのエディタ画面。深い紺色の背景に、黄色やピンクなど彩度の高い文字色でコードが表示されている
「Night Owl」で検索すると出てくるページ。夜に作業する人に人気で、名前の通り“夜ふくろう”向けの配色です。

Tokyo Night

ネオンを思わせる、都会的な雰囲気のダークテーマ。

VSCodeのエディタ画面。濃い青紫の背景に、水色やピンクのネオンカラーで文字が表示されている
「Tokyo Night」で検索すると出てくるページ。落ち着いた中に鮮やかな差し色があり、見た目にこだわりたい人に向いています。
全部気になっちゃう人は、Ctrl+K → Ctrl+Tでどんどん切り替えて試してみて。気に入らなかったらまた変えればいいだけだから、気軽にいこう〜

まとめ

  1. テーマは拡張機能の1つ。入れたらCtrl+K→Ctrl+T（MacはCmd+K→Cmd+T）ですぐ切り替えられる
  2. 迷ったら定番のOne Dark Pro、明るい画面がよければGitHub Themeから
  3. 気に入らなければ何度でも変えていい。まずは気軽に試す

毎日見る画面だからこそ、自分がしっくりくる色を見つけておくと、コードを書く時間そのものが快適になります。

人気のべんりワザ