VSコードテーマの作成

これまでのVSコードのテーマを作成したいですか?それはあなたが考えるよりも簡単ですが、プロセスは少し面倒であり、苦労して変更する必要があるすべての属性を通過する必要があります.
あなたの仕事をして、素敵に見える複数のプログラミング言語であなたのテーマをしたい場合は、多くの色の定義を追加する必要があります.
最初のテーマをリリースしましたLupine そして、このポストは、私がどのようにそれを作成したか、そして、私が方法で学んだものです.

テーマファイルの生成

テーマファイルはVisual Studio Code Extension generator これは、マイクロソフトのツールのコード拡張とテーマを作成するためのツールです.
実行してインストールできます

npm install -g yo generator-code

テーマテンプレートを生成するには

yo code

これは、テーマテンプレートを初期化するプロセスをご案内しますインタラクティブプロンプトを開始します.

質問に答えた後、あなたのテーマの名前を持つディレクトリが作成されます.今、あなたはVSコードでディレクトリを開くことができますし、テーマを編集を開始します.

cd my-theme
code .

生成されたテーマのプロジェクトは、すべてを開始するために設定しています.にtheme フォルダには、あなたのテーマの名前とJSONファイルを見つけることができます.このJSONには、変更を開始できる既定の色の定義が含まれます.

テーマの開発

あなたのテーマをテストする最も簡単な方法はF5 ). 新しいVSコードウィンドウが開き、このウィンドウが新しいテーマを使用します.
ときにあなたのテーマで色を編集するthemes/my-theme.json , すぐにデバッグウィンドウで結果が表示されます.ときどきデバッグウィンドウでトラブルが発生しましたが、Debug Toolbarまた、Chromeのdevツールを🤯 UIコンポーネントの現在の色を確認します.devのツールを開くのはCmd+Option+I ( Ctrl+Alt+I を参照).devtoolsでは、UI要素の現在の色を見つけることができますし、テーマファイルから色を検索し、それを置き換える.
これは面倒なプロセスですが、私はそれについて行くより良い方法を見つけることができませんでした.😞

UIのテーマ

私が私自身のテーマで定義したUIカラーのいくらかは、ここにあります.

エディタ

編集者はコードを編集する場所です🤣

    "editor.background": "#1B1929",
    "editor.lineHighlightBackground": "#8076C222",
    "editorCursor.foreground": "#988de4",

エディタの定義background , lineHightlightBackground and editorCursor.foreground 値.これらは、エディタの背景色を定義し、カーソルがある行の色、およびカーソルの色を強調表示します.

アクティビティバー

アクティビティバーは、ウィンドウの左側にあり、別のVSビューの間で変更するための大きなアイコンボタンを持っています.

    "activityBar.background": "#13111d",
    "activityBar.inactiveForeground": "#323b50",
    "activityBar.foreground": "#5c6e92",
    "activityBarBadge.background": "#8076C2",

アクティビティバーの定義background , inactiveForeground , foreground and activityBarBadge.background 値.フォアグラウンドキーはアイコンの色を定義する.activityBarBadge アイコンの小さなバッジの色を定義するためのものです.

サイドバー

サイドバーは、選択されたビューに応じてファイルリスト、デバッグツールなどを使用したものです.

    "sideBar.background": "#1B1929",
    "sideBarTitle.foreground": "#bbbbbb",
    "sideBarSectionHeader.background": "#242c3f",

これらは常にコンテンツの独立して使用されるサイドバーのいくつかの基本的な色を定義します.コンテンツは独立してスタイルを設定する必要があります.ファイルリストでは、次の値を定義しました.

    "list.activeSelectionBackground": "#2a273f",
    "list.activeSelectionForeground": "#8076C2",
    "list.inactiveSelectionBackground": "#2a273f",
    "list.inactiveSelectionForeground": "#8076C2",
    "list.highlightForeground": "#8076C2",
    "list.hoverBackground": "#1f2636",

これらは、異なる状態のファイルリスト項目の色値を定義します.active ここで、VSコードウィンドウがアクティブかどうかを示します.同じlist 色の定義は、リストがあるUIの他の場所にも適用されます.

ボタン

Vsのコードインターフェイスの多くのボタンがありませんが、私は彼らがアウトしないようにスタイルを追加することを決めた.

    "button.background": "#8076C2",
    "button.hoverBackground": "#8076C299",

これらの値は、ノーマルおよびホバー状態の両方のボタンの背景を設定します.

ステータスバー

ステータスバーはVSコードウィンドウの一番下のバーです.インストールされた拡張と構成によって、ステータスバーは現在のGit分岐、ファイルエンコーディングなどの情報を示します.

    "statusBar.border": "#1B1929",
    "statusBar.background": "#13111d",
    "statusBar.debuggingBackground": "#bb0000",

ステータスバーでは、アクティビティバーと同じ色を使用しました.私はステータスバーをデバッグしたときに、それを欠場することはできません独特の色を持っていた.

タイトルバー

タイトルバーのために、私はアクティビティバーとステータスバーと同じ色を使用しました.

    "titleBar.activeBackground": "#13111d",
    "titleBar.inactiveBackground": "#13111d",
    "titleBar.inactiveForeground": "#5c6e92",

これらは、あなたを開始する基本的なスタイリング値だった.

構文強調表示

私のお気に入りのテーマナイトフクロウからインスピレーションを取る.私は構文を強調して色を強調し始めた.これらはtokenColors テーマJSONのセクション.tokenColors が定義するオブジェクトの配列ですscope , fontStyle and foreground にマッチするコードscope .

{
    "name": "Comment",
    "scope": ["comment", "punctuation.definition.comment"],
    "settings": {
        "fontStyle": "italic",
        "foreground": "#637777"
    }
}

スコープはVSコードの内部ツールInspect Editor Tokens and Scopes . それを押して起動することができますCmd+Shift+P と“検査エディタ”を探します.

パレット

シンタックスハイライトのパレットから始めるために、私の好きなテーマからいくつかの色をコピーしましたNight Owl or Nako .
JavaScriptとTypescriptコードのためにいくぶん満足している結果に達した後に、私はすべての色をFigmaにコピーして、私の好みにそれらを調整し始めました.プロセスは遅く、退屈な、デバッグ対コードの間にジャンプし、トークンを検査し、別のVSCodeウィンドウで色の値を編集します.
私は、11色のパレットと反応プロジェクトでJavaScriptとTypesScriptのためにハイライトしている基本的な構文に終わりました.

構文強調表示は全く完全でありません、そして、私が私が好きでない何かに気がつくとき、私はそれが時間とともに改善するでしょう.

あなたが私のテーマを使用して、どんな問題でも見つけるならば、あなたがプロジェクトで彼らを報告するならば、私は非常に感謝しますGitHub Issues .
あなた自身のテーマを作成する場合は、これらのリソースをお勧めします
Sarah Drasner article Creating a VS Code Theme
VS Code documentation on Theme Colors