如何为Visual Studio Code编辑默认的深色主题?


88

我正在使用Windows 7 64位。

有没有一种方法可以在Visual Studio Code中编辑默认深色主题?在%USERPROFILE%\.vscode文件夹中,只有扩展名中的主题,而在安装路径中(我使用默认值C:\Program Files (x86)\Microsoft VS Code),其中包含一些标准主题的文件\resources\app\extensions,例如Kimbie Dark,Solarized Dark / Light或Monokai的变体,但没有默认的Dark主题。

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


4
对于来这里的任何人:您无需寻找和修改或创建任何主题文件。可以使用workbench.colorCustomizationseditor.tokenColorCustomizations在用户设置中修改所有内容:code.visualstudio.com/docs/getstarted/…
chipit24 '18

一个人也可能会过时,但是正在研究允许我们添加自定义全局CSS的功能,例如Atoms Edit -> Stylesheet...对该问题的最后一次更改是March github.com/Microsoft/vscode/issues/459。令人失望的是,它关闭了评论。当前的API不允许扩展程序来修改全局CSS。因此,我们将不得不等待,或者将CSS手动粘贴到像Caveman这样的开发人员工具中。
雷·福斯

Answers:


47

您要查找的文件是,

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

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


更新:

使用新版本的VSCode,您无需寻找设置文件即可自定义主题。现在,您可以使用workbench.colorCustomizationseditor.tokenColorCustomizations用户设置来自定义颜色主题。有关此事的文档可在此处找到。


11
在Linux上,它位于/usr/share/code/resources/app/extensions/theme-defaults/themes
sigalor,

1
在Arch Linux上,它是(开源发行版)于/usr/lib/code/extensions/theme-defaults/themes
hendalst,

3
默认情况下,VS Code安装在C:\ users \ {用户名} \ AppData \ Local \ Programs \ Microsoft VS Code
ToivoSäwén

2
对此问题的更新是一个明智的建议。我发现,如果直接编辑主题文件,则可以/将在更新VS Code时将其覆盖。
cniggeler

73

在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
但是,如果超出tokenColorCustomizations的范围,该怎么办?
亚历克斯

在哪里可以找到“ editor.tokenColorCustomizations”中所有可用选项的列表?
ololobus


我的编辑由于某种原因而被拒绝,但是要使此答案专门针对OP更改特定主题的愿望,您可以指定主题并修改颜色而无需更改主题文件:“ workbench.colorCustomizations”:{“ [Kimbie Dark]” :{“ activityBar.foreground”:“#472c0c”}}
aamarks

在设置中称为“工作台:颜色自定义”
Zach Saucier

29

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

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

无论如何,我搜寻了主题文件并在以下位置(在Windows中)找到了它:

c:\ Program Files(x86)\ Microsoft VS Code \ resources \ app \ extensions \ theme-monokai \ themes \

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

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

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


5
Ubuntu的安装位置为/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
Max

5
对于Mac,我发现在以下路径中更新文件有效:/Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.jsoncmd + shift + p并键入reload windowcmd以立即尝试更改:)
balajikris

1
修改主题背景也可以通过 "workbench.colorCustomizations": { "[Theme You Want to Update]": { "editor.background": "#000000" }In用户设置完成。
Bilbo

1
对于Windows上的64位VS Code,基本路径为C:\Program Files\Microsoft VS Code\resources\app\extensions\ ,通常后跟theme-....
Peter B,

使用以下命令修改用户设置中的主题 "workbench.colorCustomizations": { "editor.background": "#000" },。以下是您可以进行的所有不同自定义设置:code.visualstudio.com/api/references/theme-color
Jeremy Moritz,

17

您无法“编辑”默认主题,因为它们已“锁定”

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

有关更多信息,请参见以下文章: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

编辑2:要澄清:


1
从哪里可以复制呢?在您寄给我的文章中,没有关于它的内容。而且我不想为琐碎的事情安装任何东西,例如稍微更改语法高亮显示-特别是当我可以打开正确的文件并修改几行代码时,如果默认主题未锁定的话。此外,使用Yeoman Generator生成新主题需要另一个主题的.tmTheme文件-ColorSublime网站上没有Visual Studio深色主题,并且我无法从VSC访问“锁定的主题”。
Toreno96 '16

也许我可以从“ C:\ Program Files(x86)\ Microsoft VS Code \ resources \ app \ extensions \ cpp”编辑c ++。plist文件?但是我应该更改哪些代码块?还是某个地方有VSC默认深色主题的源文件,可以用来制作自己的自定义主题?
Toreno96 '16

您无法编辑它,因为我相信它已保存在源代码中。但是,您可以复制/粘贴它并更改几行。它位于GitHub上。我为您找到了它:github.com/Microsoft/vscode/tree/… 带链接的编辑答案
Tobiah Zarlez,2016年

可以检查我提到的c ++。plist文件。我从有关着色剂的文章中了解到,它是C ++语言的标准着色器文件。如果我错了纠正我。但是,如果您仍然在谈论编辑默认主题-是的,我知道我做不到,我从您的第一个答案中了解了有关它的句子。感谢您提供有关GitHub和链接上的源代码的信息-但我检查了其中的主题,这些主题不是默认主题,而是经过修改的,更加多彩的变体。不幸的是,这并不是我想要的。
Toreno96 '16

1
但是偶然地,我发现扩展库中的“ Xcodedefault”主题具有与默认的深色主题相同的语法。因为它现在位于磁盘的扩展文件夹中,所以安装后,我可以对其进行修改,就像我想修改默认的深色主题一样。所以,我的问题解决了。
Toreno96 '16


14

可以在VS Code 1.12或更高版本的此设置部分中更改任何颜色主题:

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

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

可用的值进行编辑:https : //code.visualstudio.com/docs/getstarted/theme-color-reference

编辑:要更改语法颜色,请参见此处:https : //code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_syntax-highlighting-colors和此处:https : //www.sublimetext.com/docs/ 3 / scope_naming.html


这样,您可以覆盖编辑器本身的颜色,但不能覆盖某些关键字的颜色(例如:字符串颜色)。
杰格斯(Jhegs)'17年

6

正如其他人所说,您需要覆盖editor.tokenColorCustomizationsworkbench.colorCustomizationssettings.json文件中设置。在这里,您可以选择一个基本主题(例如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


5

MAC OS解决方案

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


寻找您的VSCode主题路径,如下所示:

..您的安装位置/ Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json

打开.json文件,然后查找要更改的目标样式。
对于我而言,我想改变空格渲染颜色
和我发现它
"editorWhitespace.foreground"
如此下settings.json在Visual Studio代码,
添加以下行(我在工作区设置做),

"workbench.colorCustomizations": {
    "editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}

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


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


2

文档现在有一整节内容。

基本上,使用npminstallyo并运行命令yo code,您将获得一个基于文本的小向导-其选项之一是创建和编辑默认深色方案的副本。


1

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

~/.vscode/extensions

所有扩展都在那里!


这个答案很好,被不公平地否决了。
聚合酶
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.