VSCodeのテーマを作成

Oslo
https://oslo-vsc.netlify.app

いくつかの色を調整して簡単にテーマ用jsonを作成出来る。

VS Code Themes等にダークテーマは沢山あるが、背景に対してハイライトの彩度が高い、不揃いなのが気になるので自作する。

作成

カラーコード作成

  1. Osloで各カラーを調整。VS Codeタブにコードが生成される

テーマファイル作成

  1. VSCodeのターミナルでnpm install -g yo generator-code
  2. yo code
    ※初回は匿名の使用状況送信を訪ねられるのでn
  3. New Color Themeを選択
  4. Start freshを選択
  5. name, identifier, description等を適当に入力
  6. base themeにDarkを選択
  7. 作成されたthemes/**-color-theme.jsonにOsloのコードを貼付
  8. "name": "pilcrow"の部分を編集

パッケージ化

  1. npm i -g vsce
  2. cd ディレクトリ名で作成したテーマディレクトリに移動
  3. vsce package
    ※SyntaxErrorが出たら最新のNode.jsに更新
    ※リポジトリ項目無し、ライセンスファイル無しの警告にy

適用

  1. サイドバー拡張機能 > … > VSIXからのインストールで作成した.vsixを選択
  2. サイドバー管理 > 配色テーマでテーマを選択

関連記事