web-dev-qa-db-ja.com

Visual Studio Codeにテーマを追加する方法は？

最近、 VSコードエディター をダウンロードしました。これは本当にすてきです。しかし、私が見つけた唯一の問題はカラーテーマです。崇高なテキストのようなモノカイカラーテーマに使用していますが、カラーテーマを編集したり、カラーテーマをダウンロードする方法は2つしかありません：

  1. 暗いテーマ
  2. 光のテーマ

自分のテーマを追加したり、既存のテーマを複製して、好きなように配色を編集できるようにするにはどうすればよいですか？

次のファイルの色の一部を変更することはできますが、完全に新しいテーマを追加する方法はわかりません。

resources/app/client/vs/monaco/ui/workbench/native/native.main.css

色のテーマは間もなく利用可能になり、プラグインシステムの一部になります

visual-studio-code/suggestions/7756227-theme

color-schemevisual-studio-code
34
talsibony

Visual Studio Code 0.9.0以降

カスタムテーマの追加方法に関する公式ドキュメントがあります。 https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

追加するテーマの.tmthemeファイルが必要です。既存のファイルを見つけることができます。 GitHubでは、 ColorSublime または独自のテーマファイルを定義できます（たとえば https://github.com/aziz/tmTheme-Editor を使用）。

.tmthemeファイルを見つけたら、それに基づいて拡張機能を作成する2つの方法があります。

オプション1：Yeomanジェネレーターを使用する

  • Node.jsをインストールします（まだ行っていない場合）
  • npm install -g yoを実行してyoをインストールします（まだ行っていない場合）
  • コード用のYoジェネレーターをインストールします：npm install -g generator-code
  • yo codeを実行し、New Color Themeを選択します
  • 指示に従います（.tmThemeファイル、テーマ名、UIテーマなどを定義します）
  • ジェネレーターは、現在の作業ディレクトリにテーマの名前で拡張機能のディレクトリを作成します。

オプション2：自分でディレクトリを作成する

  • プラグインの名前でディレクトリを作成します（小文字のみ）。 mythemeと呼ぶことにしましょう。
  • サブフォルダーthemesを追加し、その中に.tmThemeファイルを配置します

  • このようなコンテンツを含む拡張フォルダーのルート内にpackage.jsonファイルを作成します

    {        
    "name": "theme-mytheme",
    "version": "0.0.1",
    "engines": {
        "vscode": ">=0.9.0-pre.1"
    },
    "publisher": "me",
   "contributes": {
        "themes": [
            {
                "label": "My Theme",
                "uiTheme": "vs-dark", // use "vs" to select the light UI theme
                "path": "./themes/mytheme.tmTheme"
            }
        ]
    }
}

最後に拡張機能をVisual Studio Codeに追加します

拡張フォルダを拡張ディレクトリにコピーします。これは：

  • onWindows%USERPROFILE%\.vscode\extensions

  • onMac/Linux$HOME/.vscode/extensions

VSCodeを再起動し、File -> Preferences -> Color Themeで新しいテーマを選択します

Visual Studio Code 0.8.0

Visual Studio Code 0.8.0に新しいテーマを追加することが可能です（インサイダー向けに2015-08-31にリリース[インサイダーになります： https://www.instant.ly/s/Y5nt1/nav#p/ 186a0] ）。

VSCode 0.8.0以降をインストールした後、これを実行して独自のテーマを適用します。

  1. .tmThemeファイルをダウンロードするか、独自に作成します（たとえば、 https://github.com/aziz/tmTheme-Editor を使用します）
  2. .tmThemeファイルを%CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themesにコピーします

  3. 次のようにエントリを追加して、.tmThemeファイルを%CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.jsonに登録します。

    {
    "id": "vs-theme-mynewtheme", // internal ID
    "label": "MyNewTheme",       // displayed name for the theme
    "uiTheme": "vs-dark",        // general UI appeareance (
                                 // "vs" for light themes, 
                                 // "vs-dark" for dark themes)
    "path": "./themes/myNewTheme.tmTheme" // file path 
},

  4. VSCodeを再起動し、File -> Preferences -> Color Themeで新しいテーマを選択します

47
Wosi

現在、完全に新しいテーマの追加はサポートされていません。あなたはここであなたの機能要求を提出することができます、私はすでにこれを求める人々を聞きました https://visualstudio.uservoice.com/forums/293070-visual-studio-code

12
Isidor Nikolic

ファイル（resources/app/client/vs/monaco/ui/workbench/native/native.main.css）も、フォントのレンダリング方法を変更するための適切な場所であることがわかりました。私はOS Xでフォントスムージングを無効にする方法を考えていましたが、このCSSルールをファイルに追加することでここでそれを行うことができることがわかりました-

.monaco-editor {
  -webkit-font-smoothing: none;  
}
6
tatx