如何编辑Visual Studio Code的默认黑暗主题?

时间:2016-02-02 22:54:07

标签: themes visual-studio-code

我使用的是Windows 7 64位。

有没有办法在Visual Studio代码中编辑默认的黑暗主题?在%USERPROFILE%.vscode文件夹中只有扩展的主题,而在安装路径(我使用默认,C:\ Program Files(x86)\ Microsoft VS Code)中有一些标准主题的文件在\ resources \ app \扩展,如Kimbie Dark,Solarized Dark / Light或Monokai的变种,但没有默认的黑暗主题。

但是,如果毕竟有可能编辑它,那么哪些代码块负责对象成员的颜色,指针成员以及C ++语言中类和结构的名称?

14 个答案:

答案 0 :(得分:49)

在VS代码“用户设置”中,您可以使用以下标签编辑可见颜色(这是一个示例,还有更多标签),

"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0",
    "sideBar.background": "#F8F6F6",
    "sideBar.foreground": "#000000",
    "editor.background": "#FFFFFF",
    "editor.foreground": "#000000",
    "sideBarSectionHeader.background": "#CAC9C9",
    "sideBarSectionHeader.foreground": "#000000",
    "activityBar.border": "#FFFFFF",
    "statusBar.background": "#102F97",
    "scrollbarSlider.activeBackground": "#77D4CB",
    "scrollbarSlider.hoverBackground": "#8CE6DA",
    "badge.background": "#81CA91"}

如果要编辑某些C ++颜色标记,请使用以下标记

"editor.tokenColorCustomizations": {
    "numbers": "#2247EB",
    "comments": "#6D929C",
    "functions": "#0D7C28"
}

答案 1 :(得分:25)

就主题而言,VS Code与Sublime一样可编辑。您可以编辑VS代码附带的任何默认主题。您只需要知道在哪里可以找到主题文件。

旁注:我喜欢Monokai主题。但是,我只想改变它的背景。我不喜欢深灰色的背景。相反,我认为对比度更好,背景为黑色。代码弹出更多。

无论如何,我寻找主题文件并在(在Windows中)找到它:

  

c:\ Program Files(x86)\ Microsoft VS.   代码\资源\应用\扩展\主题monokai \主题\

在该文件夹中,我找到了Monokai.tmTheme文件并修改了第一个背景密钥,如下所示:

<key>background</key>
<string>#000000</string>

主题文件中有一些“背景”键,请确保编辑正确的键。我编辑的那个是最顶层的。我认为第12行。

答案 2 :(得分:15)

您无法“编辑”默认主题,它们会被“锁定”

但是,您可以将其复制到您自己的自定义主题中,并进行您想要的精确修改。

有关详细信息,请参阅以下文章: https://code.visualstudio.com/Docs/customization/themes https://code.visualstudio.com/docs/extensions/install-extension#_your-extensions-folder

如果要更改的是C ++代码的颜色,则应该考虑覆盖c ++支持颜色程序。有关这方面的信息,请转到此处:  https://code.visualstudio.com/docs/customization/colorizer

编辑:黑暗主题在这里找到:https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults

EDIT2:澄清:

答案 3 :(得分:15)

您要查找的文件位于,

  

Microsoft VS Code \ resources \ app \ extensions \ theme-defaults \ themes

在Windows上

并搜索文件名dark_vs.json以在任何其他系统上找到它。

答案 4 :(得分:12)

Any color theme can be changed in this settings section on VS Code version 1.12 or higher:

 // Overrides colors from the currently selected color theme.
  "workbench.colorCustomizations": {}

See https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

Available values to edit: https://code.visualstudio.com/docs/getstarted/theme-color-reference

EDIT: To change syntax colors, see here: https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors and here: https://www.sublimetext.com/docs/3/scope_naming.html

答案 5 :(得分:7)

现在有一个选项可以修改当前主题,该主题将复制当前主题设置,并允许您将其保存为*.color-theme.json JSON5文件

Generate color theme from current settings

然而,更简单的方法是编辑用户设置并自定义workbench.colorCustomizations

Editing color customizations

答案 6 :(得分:5)

tldr

您可以通过切换到主题,然后从命令面板中选择 Developer > Generate Color Theme From Current Settings 来获取任何主题(包括内置主题)的颜色。

详情

  1. 通过从命令面板中选择 Preferences: Color Theme 然后选择主题,切换到您想要修改的内置主题。

  2. 通过从命令面板中选择 Developer > Generate Color Theme From Current Settings 来获取该主题的颜色。使用后缀 -color-theme.jsonc 保存文件。
    color-theme 部分将在编辑文件时启用颜色选择器小部件,jsonc 将文件类型设置为 JSON with comments

  3. 从命令面板中选择 Preferences: Open Settings (JSON) 以打开您的 settings.json 文件。然后将您想要的更改添加到 workbench.colorCustomizationstokenColorCustomizations 部分。

    • 要将设置仅限于此主题,请使用关联数组,其中键是方括号 ([]) 中的主题名称,值是设置的关联数组。
    • 可以在 settings.jsonworkbench.colorTheme 中找到主题名称。

例如,以下内容自定义了颜色主题列表中列为 Dark+ (default dark) 的主题。它将编辑器背景设置为接近黑色,将注释的语法突出显示设置为暗灰色。

// settings.json
"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#19191f"
    }
},
"editor.tokenColorCustomizations": {
    "[Default Dark+]": {
        "comments": "#5F6167"
    }
},

答案 7 :(得分:3)

我不确定这个答案是否适合这里,但我想为MAC用户分享一个解决方案,如果我开始一个新问题并在那里自己回答,那看起来很尴尬。

[MAC OS解决方案]
查找下面的VSCode主题路径:

  

.. your_install_location / Visual Studio   Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

打开.json文件并查找要更改的目标样式。
对于我的情况,我想更改空白渲染颜色
并且我发现它为
{ {1}}左右,在Visual Studio代码的"editorWhitespace.foreground"下,我添加了以下行(我在工作区设置中),

settings.json

解决方案来自:https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme

不要忘记⌘命令 + S 保存设置才能生效。

答案 8 :(得分:2)

docs现在有关于此的整个部分。

基本上,使用npm安装yo,然后运行命令yo code,您将获得一个基于文本的小向导 - 其中一个选项将是创建并编辑默认暗方案的副本。

答案 9 :(得分:2)

我来这里是为了找到一种编辑主题的方法,但是在Mac上找不到它。 深入研究之后,终于找到了安装位置:

~/.vscode/extensions

所有扩展都在其中!

答案 10 :(得分:1)

最新版本的 VS 代码,您可以使用工作台自定义颜色以使其更加个性化,如下面的 gif 图像所示:

enter image description here

转到设置 > 颜色自定义 > 在settings.json中编辑

添加使用 editor.tokenColorCustomizations 的颜色设置,例如更改所有默认 Dark++ 主题的注释,您可以添加以下代码:

"editor.tokenColorCustomizations":{
        "comments": "#fff000"
  }

答案 11 :(得分:0)

正如其他人所述,您需要覆盖settings.json文件中的editor.tokenColorCustomizationsworkbench.colorCustomizations设置。在这里,您可以选择一个基本主题,例如Abyss,并且仅覆盖您要更改的内容。您可以很容易地覆盖函数,字符串颜色等很少的东西。

例如为workbench.colorCustomizations

"workbench.colorCustomizations": {
    "[Default Dark+]": {
        "editor.background": "#130e293f",
    }
}

例如为editor.tokenColorCustomizations

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "functions": "#FF0000",
        "strings": "#FF0000"
    }
}
// Don't do this, looks horrible.

但是,深度自定义(如更改var关键字的颜色)将要求您在textMateRules键下提供替代值。

例如下方:

"editor.tokenColorCustomizations": {
    "[Abyss]": {
        "textMateRules": [
            {
                "scope": "keyword.operator",
                "settings": {
                    "foreground": "#FFFFFF"
                }
            },
            {
                "scope": "keyword.var",
                "settings": {
                    "foreground": "#2871bb",
                    "fontStyle": "bold"
                }
            }
        ]
    }
}

您还可以跨主题全局覆盖

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
                //following will be in italics (=Pacifico)
                "comment",
                "entity.name.type.class", //class names
                "keyword", //import, export, return…
                //"support.class.builtin.js", //String, Number, Boolean…, this, super
                "storage.modifier", //static keyword
                "storage.type.class.js", //class keyword
                "storage.type.function.js", // function keyword
                "storage.type.js", // Variable declarations
                "keyword.control.import.js", // Imports
                "keyword.control.from.js", // From-Keyword
                //"entity.name.type.js", // new … Expression
                "keyword.control.flow.js", // await
                "keyword.control.conditional.js", // if
                "keyword.control.loop.js", // for
                "keyword.operator.new.js", // new
            ],
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

此处有更多详细信息:https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide

答案 12 :(得分:0)

在安装了 VS Code 作为 snap 包的 Ubuntu 中,我在 num_integer =number[0].to_i

找到了主题

答案 13 :(得分:0)

ctrl+k+t if you want to switch from a dark theme to other theme

For customizing default dark theme, 

1 Click on the left bottom gear(Manage) on visual studio 
2 Select Settings
3 Type JSON in search settings, Click on Edit JSON Settings
4 Inside Workspace settings in the left columns, paste the following code.
5 Hover over each property and change the default # color value to the one             
  liked

        
"workbench.colorCustomizations": {
    "list.inactiveSelectionBackground": "#C5DEF0​",
    "sideBar.background": "#F8F6F6​",
    "sideBar.foreground": "#000000​",
    "editor.background": "#FFFFFF​",
    "editor.foreground": "#000000​",
    "sideBarSectionHeader.background": "#CAC9C9​",
    "sideBarSectionHeader.foreground": "#000000​",
    "activityBar.border": "#FFFFFF​",
    "statusBar.background": "#102F97​",
    "scrollbarSlider.activeBackground": "#77D4CB​",
    "scrollbarSlider.hoverBackground": "#8CE6DA​",
    "badge.background": "#81CA91​"}