コードを書く画面の色は、あとから好きなだけ変えられます。カラーテーマという拡張機能を1つ入れるだけで、見やすさも気分もがらっと変わります。ここでは定番のテーマを、タイプ別に画面つきで紹介します。
べんりワザ入れておきたいVSCode拡張機能テーマも拡張機能の一種。入れ方の基本はこちら3テーマの切り替え方
- 好きなテーマの拡張機能を、Extensionsパネルから Install
Ctrl+Kに続けてCtrl+T（MacはCmd+Kに続けてCmd+T）でテーマ選択画面を開く- 上下キーで選ぶと、その場でプレビューされる。決めたら Enter
入れたテーマがすぐ気に入らなくても、この手順でいつでも他のテーマに切り替えられます。気軽にいくつも試してみましょう。
テーマを選ぶときのポイント
見た目の好みだけで選んでもいいですが、次の3点も見ておくと後悔が少なくなります。
- 文字と背景のコントラスト：暗すぎる・明るすぎると目が疲れやすい。長時間コードを書くなら、彩度が強すぎない配色のほうが続けやすい
- 対応言語の広さ：人気テーマほどHTML/CSS/JavaScript以外の言語（PHPやPythonなど）にも色分けが行き届いている。マイナーなテーマだと一部の文字が色分けされず単色のままのことがある
- 拡張機能のダウンロード数・評価：Extensionsパネルの検索結果に出る数字。数が多いテーマは更新も続きやすく、長く使っても安心できる
タイプ1：定番のダーク系テーマ
目が疲れにくく、いちばん選ばれている定番の系統です。
One Dark Pro
世界でもっとも使われているといっていい、青みがかった落ち着いたダークテーマ。
Dracula Official
紫を基調にした、コントラストのはっきりしたダークテーマ。
タイプ2：目にやさしいライト系テーマ
明るい部屋や昼間の作業では、背景が白系のテーマのほうが見やすいこともあります。
GitHub Theme
GitHub公式が出している、シンプルで見慣れた配色のテーマ。
Ayu
淡いベージュを基調にした、目にやさしいライト系テーマ。
タイプ3：個性が光るテーマ
配色そのものを楽しみたい人向けの、雰囲気のあるテーマです。
Night Owl
夜空のような紺色を背景に、星のような彩度の高い文字色が映えるテーマ。
Tokyo Night
ネオンを思わせる、都会的な雰囲気のダークテーマ。
6つのテーマ比較表
拾い読みしやすいように、紹介した6つを1枚にまとめました。
| テーマ | 明るさ | 色の印象 | こんな人に |
|---|---|---|---|
| One Dark Pro | ダーク | 青みで落ち着いた | 迷ったらこれ。対応言語がいちばん広い |
| Dracula Official | ダーク | 紫＋ビビッド | 種類の見分けを最優先したい |
| GitHub Theme | 両方 | 見慣れた標準的な配色 | ダークとライトを1つで切りかえたい |
| Ayu | ライト | 淡いベージュ | 白背景が好きだが真っ白はまぶしい |
| Night Owl | ダーク | 紺＋高彩度 | 夜に長く作業する |
| Tokyo Night | ダーク | 青紫のネオン調 | 見た目の雰囲気にこだわる |
ダークとライト、どっちがいい？
「ダークのほうが目にいい」とよく言われますが、実際は部屋の明るさと画面の明るさが近いほうが疲れにくいというのが基本です。
- 暗い部屋・夜——ダーク系。明るい画面はまぶしく、瞳孔が閉じきって疲れます
- 明るい部屋・日中の窓際——ライト系。周囲が明るいとダーク画面は文字が沈んで読みにくくなります
つまり時間帯によって正解が変わるので、両方持っておくのが実用的です。GitHub Themeのようにダーク版とライト版が同梱されているテーマを1つ入れておけば、Ctrl+K→Ctrl+Tだけで行き来できます。
テーマ以外に効く「見やすさ」の設定3つ
配色を変えても目が疲れるときは、テーマではなく文字そのものが原因かもしれません。歯車アイコン→「設定」から検索して変えられます。
- 文字の大きさ（font size）——初期値は12〜14あたり。15〜16に上げるだけで、目を細める回数がはっきり減ります
- 行の高さ（line height）——
0は自動。1.6くらいの数値を入れると行間が空いて、長いコードでも行を見失いません - フォント（font family）——
0とO、1とlが区別しやすい等幅フォントに変えると、打ちまちがい探しがラクになります
まとめ
- テーマは拡張機能の1つ。入れたら
Ctrl+K→Ctrl+T（MacはCmd+K→Cmd+T）ですぐ切り替えられる - 迷ったら定番のOne Dark Pro、明るい画面がよければGitHub Themeから
- 気に入らなければ何度でも変えていい。まずは気軽に試す
- ダークかライトかは好みより部屋の明るさで決める。OS連動にすれば自動で切りかわる
- それでも疲れるときは、配色ではなく文字の大きさ・行間・フォントを見直す
毎日見る画面だからこそ、自分がしっくりくる色を見つけておくと、コードを書く時間そのものが快適になります。