TECH MEDIA

テックメディア


デザインプログラミング言語技術開発環境/ツール
パッとわかりやすく!思考を止めない表示へ!

緑を基調とした VS Code のダークテーマを公開しました

目次
  1. 01|前書き
  2. 02|テーマの特徴
  3. 03|拡張機能のダウンロード

1. 前書き

最近 Visual Studio Code の拡張機能としてほしい機能があり、拡張機能を作成したいと考えていました。
しかし、いきなり本命を作ろうとしても開発後半で改善点に気づいてリファクタリング祭りになりそうなので、とりあえず簡単な拡張機能を作成してリリースすることにしました。
そして、セマンティックハイライトにこだわりを持っているので、これを機に拡張機能として自分が考えた最強のテーマを完成させました。

2. テーマの特徴

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

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

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

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

3. 拡張機能のダウンロード

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

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

RECRUIT 採用情報

「eビジネスに関わる全ての人を幸せにする」
私達とともに新たな時代をつくりませんか?