前書き

以前から Visual Studio Code の拡張機能を作成してみたいと考えていました。しかし、いきなり本命の機能を開発すると後半で改善点に気づいてリファクタリングが大変になりそうだったので、まずは比較的シンプルな拡張機能を作成してリリースまでの流れを経験することにしました。

普段からセマンティックハイライトにこだわりを持っているので、これを機に自分が考えた理想のカラーテーマを拡張機能として完成させました。

テーマの特徴

VS Code 標準のダークテーマとして搭載されている Dark Modern Theme を基に、標準のテーマカラーである青を緑に置き換えたようなシンプルなテーマになっています。
また、セマンティックハイライトは Visual Studio 2015 時代の C++ で提供されていたテーマも参考にしています。

標準で使用されている彩度が高い色は少し白に近づけて優しい色に変更し、悪目立ちしないようにしてあります。
コード全体を見渡した時にごちゃごちゃせず、すっと一つのテキストとして頭に入ってくるような配色を心がけました。

標準のセマンティックハイライトよりも色の種類を増やし、型・関数・変数・定数・クラス・列挙型といった役割の違いが直感的に判別できるようにしています。
ただし、情報量を増やしすぎると逆にノイズになるため、彩度や明度はあくまで抑えめに調整し、視線が必要以上に散らばらないよう調整しました。

集中してコードを読み、構造を把握し、思考を止めずに書き続けられる。
そんな開発体験を支えることを目的としたテーマです。

拡張機能のダウンロード

以下が拡張機能のページになります。
VS Code からダウンロードしてみてください。

https://marketplace.visualstudio.com/items?itemName=nicoyou.theme-dark-modern-pro

この拡張機能は、Visual Studio Code 標準テーマ「Dark Modern」をベースに、コードがより見やすく、理解しやすくなるように微調整されたテーマです。 配色はデフォルトの雰囲気を大きく崩さず、画面の見やすさを追求。 システムカラーには、目に優しい緑色を基調とした色合いを採用しています。
幅広いプログラミング言語に対応し、特にTypeScriptやPythonにおいては、言語特有の構文に最適化されたテーマ設定が施されています。