如何在 Visual Studio Code 中添加主题? [英] How to add theme in Visual Studio Code?

问题描述

我最近下载了 VS 代码编辑器，非常不错.但我在其中发现的唯一问题是颜色主题，我习惯于monokai 颜色主题就像在崇高的文本中一样，我找不到编辑的方法颜色主题或下载颜色主题只有 2 个选项:

I recently downloaded the VS code editor which is really nice. but the only problem I find in it is the color theme, I am use to monokai color theme like in sublime text and I can't find a way to edit the color theme or download a color theme there are only 2 options:

1. 深色主题
2. 浅色主题

如何添加我自己的主题或复制现有主题，以便我能够按我的意愿编辑配色方案?

How can I add my own theme or duplicate existing one so I will be able to edit the color scheme as I want to?

我设法更改了以下文件中的一些颜色，但仍然我不知道如何添加全新的主题:

I manage to change some of the colors in the following file but still I don`t know how to add completely new theme:

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

<小时>

看起来颜色主题即将推出，它将成为插件系统的一部分

---

Looks like color themes will be available soon and it will be a part of a plugin system

visual-studio-code/suggestions/7756227-主题

推荐答案

Visual Studio Code 0.9.0 及更高版本

有关于如何添加自定义主题的官方文档:https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

There's an official documentation on how to add a custom theme: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

对于要添加的主题，您需要一个 .tmtheme 文件.您可以找到现有文件，例如在 GitHub 上，ColorSublime 或者您可以定义自己的主题文件(例如使用 https://github.com/aziz/tmTheme-Editor).

You need a .tmtheme file for the themeyou want to add. You can find existing files e.g. on GitHub, ColorSublime or you can define your own theme file (for example with https://github.com/aziz/tmTheme-Editor).

找到 .tmtheme 文件后，您有两种方法可以基于它创建扩展.

After finding a .tmtheme file you have two ways to create an extension based on it.

选项 1:使用 Yeoman 生成器

• 安装 node.js(如果你还没有安装)
• 通过执行 npm install -g yo
安装 yo(如果您还没有安装)
• 为代码安装 Yo 生成器:npm install -g generator-code
• 运行yo code并选择New Color Theme
• 按照说明操作(定义 .tmTheme 文件、主题名称、ui 主题等)
• 生成器使用当前工作目录中的主题名称为您的扩展创建一个目录.

• Install node.js (if you haven't already done)
• Install yo (if you haven't already done) by executing npm install -g yo
• Install the Yo generator for code: npm install -g generator-code
• Run yo code and select New Color Theme
• Follow the instructions (define the .tmTheme file, theme name, ui theme etc.)
• The generator creates a directory for your extension with the name of the theme in your current working directory.

选项 2:自己创建目录

• 使用您的插件名称(仅小写字母)创建一个目录.假设我们称之为mytheme.
• 添加一个子文件夹 themes 并将 .tmTheme 文件放入其中

• 在扩展文件夹的根目录下创建一个文件package.json，内容如下

• Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mytheme.
• Add a subfolder themes and place the .tmTheme file inside of it

• Create a file package.json inside the root of the extension folder with content like this

{        
    "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

将扩展文件夹复制到扩展目录.这是:

Copy the extension folder to the extension directory. This is:

• 在 Windows 上 %USERPROFILE%\.vscode\extensions

在 Mac/Linux 上 $HOME/.vscode/extensions

重启VSCode，在File->中选择新的主题；首选项 ->颜色主题

Visual Studio 代码 0.8.0

可以在 Visual Studio Code 0.8.0 中添加新主题(于 2015 年 8 月 31 日发布给内部人员 [成为内部人员:https://www.instant.ly/s/Y5nt1/nav#p/186a0]).

It's possible to add new themes in Visual Studio Code 0.8.0 (released for insiders on 2015-08-31 [become an insider: https://www.instant.ly/s/Y5nt1/nav#p/186a0]).

安装 VSCode 0.8.0 或更高版本后，执行此操作以应用您自己的主题:

After installing VSCode 0.8.0 or higher do this to apply your own theme:

1. 下载 .tmTheme 文件或创建自己的文件(例如使用 https://github.com/aziz/tmTheme-Editor)
2. 将 .tmTheme 文件复制到 %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes

3. 在 %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json 中注册 .tmTheme 文件，添加一个像这样的条目:

1. Download a .tmTheme file or create your own (for example with https://github.com/aziz/tmTheme-Editor)
2. Copy the .tmTheme file to %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes

3. Register the .tmTheme file in %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json by adding an entry for it like this:

{
    "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 
},  

重启VSCode并在File->中选择新主题首选项 ->颜色主题

这篇关于如何在 Visual Studio Code 中添加主题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！