昨年末頃から勢いでVSCodeのテーマを作ってきた。スプラトゥーン3の武器モチーフが3つ、ポケモンのモチーフが1つ(しかし中に9種類ある)。これらは元ネタになる色があったので、エディタでコードを表示したときに、なんとなくモチーフの色になるように調整するだけでよかった。
それらに飽きたのでちゃんと作ってみようと思い、VS Code Themesで500個くらい調べた。今回はそこで見つけたお気に入りのテーマの話。エディタに表示している言語は C++、シェルスクリプト、TypeScript、Go、Python、Ruby、Yaml、CSSの8種です。
- Visual Studio Marketplace / Open VSX Registry (Kiro, Cursor)
- 理想のシンタックスハイライトを作る
- 理想のエディタUIを作る
- お気に入りのVSCodeテーマ ←いまここ
One Dark Pro

One Dark Pro - Visual Studio Marketplace
Atomエディタのポート版。オリジナルはAtomのリポジトリにある。エディタのUI、シンタックスカラー共に完成されていて、落ち着いたトーンで見やすくて使いやすい。シンタックスカラーは他のエディタも参考にしていることが多い。
長らくAtomを愛用していたので、自分もVSCodeに移ってきたときはこのテーマを使ってきた…と思っていたら、Atom One Dark の方を使っていた(見た目はだいたい同じ)。
Aylin

Aylin - Visual Studio Marketplace
One Darkの色をパステル調にしてちょっとかわいくしたテーマ。明度が高いのでちょっと眩しい。READMEに「Ayuを参考にした」とあり、Ayuも眩しいのでなるほど…という感じ。
Nord

Nord - Visual Studio Marketplace
色相を寒色に寄せて、彩度も落としたテーマ。落ち着いていていいんだけどもうちょっと色が濃くても…と思う時がある。Nordのカラーパレットのサイトもある。
Nordの派生テーマはいくつかあり、ライトテーマにした Polar もスッキリしていて好き。
Slime

Slime Theme - Visual Studio Marketplace
これもAtomをベースにしたもの。雰囲気はNordをちょっと濃くした感じ。アイコンはマイクラのスライムのようで、色味もアースカラー寄りな感じになっている。
Tokyo Night

Tokyo Night - Visual Studio Marketplace
Omarchyの公式テーマに入っていて知ったテーマ。AylinがAtomをパステル調にしているように、こちらはAtomを寒色寄りに調整している。でも文字列や数値などの色はAtomと同じなので自然に読める。
READMEにあるように東京の夜景をベースにしているとのこと。
A clean Visual Studio Code theme that celebrates the lights of Downtown Tokyo at night.
Rosé Pine

Rosé Pine - Visual Studio Marketplace
これもOmarchyに入っていたので知ったテーマ。Tokyo Nightからさらに色を減らしたような感じ。標準ではイタリック体を多用しているが、イタリックなし版も同梱されている。
一緒に入っている Rosé Pine Moon がセーラームーンっぽくて良い。
並べてみるとだいたい同じに見える
こうやって並べると細かいディテールが潰れるので、だいたい同じように見える。実際、自分の好みである Atom ベースのシンタックスカラーを持っていて、UIが違和感なく整っているもの、とするとこんな感じになった。
自分の中では各テーマを次のようにカテゴリ分けして見ていた。
| グループ | 内容 | テーマ |
|---|---|---|
| Atom系 | 背景が無彩色寄りで、シンタックスがAtom配色のもの | Vira, Primal |
| Night系 | Atomをベースにしつつ色を華やかにしたもの | Moonlight, Night Owl, Horizon, Catppuccin |
| Dim系 | NordやSlimeのように彩度を落としたもの | Everforest |
| kawaii系 | Night系の色相をさらに紫に寄せたもの。 | Witch Hazel, kawaii |
| monokai系 | なんか派手なもの | Bearded, SynthWave ‘84, JellyFish |
| duotone系 | 色数が少ないもの | Vesper |
| 日本の地名系 | 日本の地名のもの | Kabukichō, Ariake Dark, Kanagawa, sapporo, Shibuya, Shinjuku Dark Theme |
| ネタ系 | 一発ネタっぽいもの | Evangelion, Arduino, FakeDonald’s, Slack, Windows NT, Word |
大抵のテーマはAtom系かmonokai系で、レゴブロックみたいに色が多い。Vesperみたいなものをデュオトーン系としているが、そういうテーマはあまりない。
Material系最強のVira
Material Theme — Deprecated - Visual Studio Marketplaceというテーマがあり、マテリアルデザインベースで見やすくて使いやすい。実機に入れて確認しようとしたら Deprecated で使えなかった。
代わりに今は Vira Theme - Visual Studio Marketplace となっていたようでそちらを入れた。デザイナーが作っている感じがしてすごく良かったが、エディタを開くたびに「使用期限が〜」と通知してきて5日後くらいにこうなって使えなくなってしまった。

見た目の割にレビューが荒れていたので不思議だったが、オープンソースのマテリアルデザインを使っていたのにクローズド化して、有料のViraとして再出発していたっぽい。なんと…。