I 💚 GTT
緑を軸に、日々のコードを読みやすく。
GovTech東京のWebサイトの配色や雰囲気に着想を得た、VS Code用の非公式テーマです。
Light / Darkのカラーテーマに、ファイルアイコンとProduct Iconを同梱しています。
このテーマについて
GovTech東京の取り組みに、一個人として関心を持っています。
その活動を知る中で印象に残った緑を、毎日使うエディターにも取り入れてみたいと思い、このテーマを作りました。
気に入っていただけたら、気軽に使ってもらえるとうれしいです。
本テーマは個人による非公式の制作物です。GovTech東京が提供・公認するものではありません。
名称は着想元を示すために使用しており、拡張機能のマークや各アイコンは独自に制作しています。
含まれるもの
| 名前 |
内容 |
| GTT Light |
白・ライトグレーを基調に、緑を効かせた配色 |
| GTT Dark |
チャコールグレーを基調に、同じ色の役割を保った配色 |
| GTT Icons |
緑のフォルダと、種類ごとの色・形で見分けるファイルアイコン |
| GTT Product Icons |
細い線と控えめな角丸で揃えた、検索・Git・実行などの操作アイコン |
カラーテーマと2種類のアイコンテーマは、それぞれ個別に選べます。
フォントの指定や追加インストールは不要です。
インストールと設定
VSIXファイルを受け取った場合は、VS Codeの拡張機能ビューの「…」から
Install from VSIX...（VSIXからのインストール） を選び、配布された .vsix ファイルを開いてください。
インストール後、コマンドパレット（macOS: ⌘⇧P / Windows・Linux: Ctrl+Shift+P）で次を選択します。
| コマンド |
選択するテーマ |
| Preferences: Color Theme |
GTT Light または GTT Dark |
| Preferences: File Icon Theme |
GTT Icons |
| Preferences: Product Icon Theme |
GTT Product Icons |
カラーテーマだけ使う場合は、最初の設定だけで大丈夫です。
配色の考え方
エディターの広い面は白・グレーに、タイトルバーやキーワード・型名には緑を使っています。
Light / Darkを切り替えても、同じ役割の文字には同じ系統の色がつきます。
| 場面 |
見え方 |
| 文字やファイルの選択 |
薄い緑の塗り |
| 同じ変数・文字列の強調 |
控えめな塗り。通常の選択や参照には枠をつけません |
| 検索結果 |
黄系。現在の候補を濃く表示 |
| Git差分 |
追加は緑、削除は赤。変更文字の塗りと枠を強調 |
| タブ |
アクティブは緑、非アクティブはグレー、未保存の上辺は黄土色 |
| 警告・エラー |
警告は黄系、エラーは赤 |
| 補完・ホバー・ターミナル |
同じ色の役割で統一 |
未保存タブの色付き上辺は、設定の workbench.editor.highlightModifiedTabs を有効にすると表示されます。
ターミナルの成功・失敗の印には、VS Codeのシェル統合が必要です。
対応範囲
- カラーテーマ：TypeScript / JavaScript、JSON、HTML、CSS、Markdownなどの構文色・セマンティックハイライト
- ファイルアイコン：TS / JS / React / Vue / Python / Go / Rust、設定、テスト、画像、Markdownなど。Light / Darkに合わせて明るさを切り替えます
- Product Icon：主要32種類の形を46個のアイコンIDに割り当て。未定義のものはVS Code標準のアイコンを使用します
構文色の細かな表示は、使用する言語拡張によって異なります。
ファイルアイコンで明示的に対応していない種類には、汎用アイコンや言語拡張のアイコンが表示されます。
表示が違うとき
インストールしただけでは、使用中のテーマは切り替わりません。上の設定からGTTを選んでください。
workbench.colorCustomizations や editor.tokenColorCustomizations、editor.semanticTokenColorCustomizations の設定があると、テーマの色が上書きされることがあります。
緑のタイトルバーは、カスタムタイトルバー（window.titleBarStyle: custom）で表示されます。
着想元
GovTech東京 のWebサイトを参考にしています。
公式のブランドガイドを再現したものではなく、コードの読みやすさに合わせて調整した独自の配色です。
License
MIT
