VSCodeテーマ版のGitHubともいえるサービス「VS Code Theme Studio」でオリジナルテーマを作ってみた

VS Code Theme Studio
https://themes.vscode.one/

VS Code Theme Studioの概要

「VS Code Theme Studio」は、VSCodeテーマをダウンロードしたり、オリジナルの作品を作成して共有できるサービスです。誰かがつくったテーマをフォークすることもできるので、だれでも気軽に作れるのが特徴です。

アカウント登録

早速、VS Code Theme Studioを使って簡単なテーマをつくってみます。

まずは、作成にあたってアカウント登録を行います。

続いて、ユーザー名を設定

最後にベースとなるテーマを、ライトモードかダークモードか選択して完了です。

VS Code Theme Studioを使ってみる

こちらが、テーマを編集するホーム画面になります。

サイドメニューには変更できる要素と、カラー設定がずらりと並んでいます。アクションバーやボタン、バッジなど、細かい箇所までカスタマイズが可能。

今回は、メニューバーに表示されるバッジカラーを変更してみます。

カラーパレットから色を選択すると、即座にプレビューに反映されるので、作業もサクサク進みます。

カラーの編集が終わったらタイトルも更新。

全ての作業が終わったら、SAVE THEMEをクリックして作業完了。

作成したテーマは、Your Themesで確認することができます。

そして、こちらのボタンからテーマをダウンロード。VSCodeにインポートすれば、即座に使うことができます。

非デザイナーだと、テーマをイチから作るのは、結構骨の折れる作業です。しかし、ベースとなるテーマが用意されていたり、誰かの作品をフォークすることで、気軽に独自テーマにカスタマイズできるのが最大の魅力です。

VS Code Theme Studio
https://themes.vscode.one/