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

137

我正在使用 Windows 7 64 位操作系统。

是否有办法在 Visual Studio Code 中编辑默认的深色主题?在 %USERPROFILE%\.vscode 文件夹中,只有来自扩展的主题,而在安装路径中(我使用默认路径 C:\Program Files (x86)\Microsoft VS Code),一些标准主题的文件出现在 \resources\app\extensions 中,例如 Kimbie Dark、Solarized Dark/Light 或 Monokai 的变体,但没有默认的深色主题。

如果终究有可能进行编辑,则哪些代码块负责 C++ 语言中对象成员、指针成员和类和结构体名称的颜色?


8
针对来此的任何人:您无需寻找和修改或创建任何主题文件。一切都可以使用用户设置中的“workbench.colorCustomizations”和“editor.tokenColorCustomizations”进行修改:https://code.visualstudio.com/docs/getstarted/themes#_customizing-a-color-theme。请注意,不需要解释或提供其他信息。 - chipit24
我们也可以等待一个正在开发中的功能,允许我们添加自定义全局CSS,例如Atoms Edit -> Stylesheet...。该问题的最后一次更改是在三月份 https://github.com/Microsoft/vscode/issues/459 。令人失望的是,它已经关闭了评论。当前的API不允许扩展修改全局CSS...所以我们必须等待,或者像穴居人一样手动将CSS粘贴到开发者工具中。 - Ray Foss
15个回答

126
在VS Code的“用户设置”中,您可以使用以下标记编辑可见颜色(这是一个示例,还有更多标记):
"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,我该怎么办? - Alex
1
在哪里可以找到“editor.tokenColorCustomizations”中所有可用选项的列表? - ololobus
13
哦,找到了 https://code.visualstudio.com/api/references/theme-color#editor-colors - ololobus
2
我的编辑由于某些原因被拒绝了,但为了使这个答案特别针对OP想要更改特定主题,您可以指定主题并修改颜色而不更改主题文件:"workbench.colorCustomizations": { "[Kimbie Dark]": { "activityBar.foreground":"#472c0c" } } - aamarks
1
在设置中它被称为“工作台:颜色自定义”。 - Zach Saucier
1
请注意,如果settings.json文件中不存在选项"workbench.colorCustomizations": { },则需要添加该选项。仅在主JSON树中编辑editor.background等选项是无效的。 - Yogesh Umesh Vaity

84

你要查找的文件位于

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

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


更新:

使用新版本的VSCode,您不需要搜寻设置文件以自定义主题。现在,您可以使用workbench.colorCustomizationseditor.tokenColorCustomizations用户设置自定义颜色主题。有关此问题的文档,请单击此处


15
在Linux上,它位于/usr/share/code/resources/app/extensions/theme-defaults/themes - sigalor
2
在 Arch Linux 上,它(开源版本)位于 /usr/lib/code/extensions/theme-defaults/themes - hendalst
4
默认情况下,VS Code被安装在C:\users{用户名}\AppData\Local\Programs\Microsoft VS Code。 - Toivo Säwén
2
这个答案的更新是一个明智的建议。我发现如果直接编辑主题文件,它们可能会在 VS Code 更新时被覆盖。 - cniggeler
6
或许对别人来说很明显,但在 Mac 上,路径是 /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults。请注意不要改变原意,尽可能使翻译通俗易懂,不提供额外解释或其他内容。 - TimH

30
就主题而言,VS Code与Sublime一样可编辑。您可以编辑任何随VS Code提供的默认主题。您只需要知道在哪里找到主题文件即可。
顺便说一句:我喜欢Monokai主题。但是,我想更改它的背景颜色。我不喜欢暗灰色的背景。相反,我认为纯黑色背景的对比度要好得多。代码更加醒目。
无论如何,我搜索了主题文件并在其中找到了它(在Windows中):
c:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\theme-monokai\themes\
在那个文件夹中,我找到了Monokai.tmTheme文件,并将第一个背景键修改如下:
<key>background</key>
<string>#000000</string>

在主题文件中有几个名为“background”的键,请确保您编辑正确的键。我编辑的那个位于最顶部。我想是第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.json,按下 cmd+shift+p 并输入“reload window”命令,即可立即尝试更改 :) - balajikris
1
在用户设置中,也可以通过以下方式修改主题的背景: "workbench.colorCustomizations": { "[要更新的主题]": { "editor.background": "#000000" } - Bilbo
1
对于 Windows 上的 64 位 VS Code,基本路径为 C:\Program Files\Microsoft VS Code\resources\app\extensions\,通常后面跟着 theme-.... - Peter B
在用户设置中使用 "workbench.colorCustomizations": { "editor.background": "#000" } 修改主题。以下是您可以进行的所有不同自定义:https://code.visualstudio.com/api/references/theme-color - Jeremy Moritz

26

如果您想进行深度定制,请阅读以下内容

正如其他人所述,您必须在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


2
非常感谢您的出色回答!它对我帮助很大! - skiabox
如何更改.css和.scss文件的属性值颜色?@Varun - Hussein Eid
这帮助我找到了默认主题名叫 [Default Dark+] - plswork04

18

默认主题是“锁定的”,无法进行“编辑”。

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

有关更多信息,请参见以下文章: 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
也许我可以编辑位于“C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\cpp”路径下的c++.plist文件?但是我应该更改哪些代码块呢?或者说,VSC默认的暗色主题有源文件可用,我可以使用它来制作自己的自定义主题吗? - Toreno96
你不能编辑它,因为我相信它是保存在源代码中的。不过你可以复制/粘贴它并修改一些行。它位于GitHub上,我已经为你找到了链接:https://github.com/Microsoft/vscode/tree/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults - Tobiah Zarlez
可以编辑我提到的c++.plist文件,我已经检查过了。从关于着色器的文章中,我了解到这是C++语言的标准着色器文件。如果我错了,请纠正我。但是,如果你仍然在谈论编辑默认主题-是的,我知道我不能这样做,我从你的第一个答案中就明白了这句话。感谢您提供有关GitHub上源代码和链接的信息-但是我已经检查过那里的主题不是默认主题,而是修改后的、更丰富多彩的变体。不幸的是,这并不是我想要的方式。 - Toreno96
1
但是我偶然发现,扩展程序库中的“Xcodedefault”主题具有与默认的深色主题相同的语法突出显示。由于它现在位于我的磁盘上的扩展文件夹中,在安装后,我可以像修改默认的深色主题一样修改它。因此,我的问题得到了解决。 - Toreno96
这个回答中引用的tmTheme文件现在非常过时,在master - dark_vs和dark_plus中不存在 - 现在是JSON文件。要编辑内置主题,我们现在需要一种将该JSON转换为tmTheme文件的方法。 - Jonathan Edwards

18

最简单的方法是编辑用户设置并自定义 workbench.colorCustomizations

编辑颜色自定义

如果您想制作自己的主题

还有一种选项可以修改当前主题,它将复制当前主题设置并让您将其保存为*.color-theme.json JSON5文件。

从当前设置生成颜色主题


1
你想把答案重新排序,让更好、更容易的答案排在第一位吗? =] - Relequestual
1
那么,您如何将其安装为主题? - K-Dawg

17

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.json中的workbench.colorTheme中找到。

例如,以下代码将自定义在“Color Theme”列表中列为Dark+(default dark)的主题。 它将编辑器背景设置为接近黑色,并将注释的语法突出显示为深灰色。

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


1
这是覆盖某些颜色的正确方法。谢谢。 - Polymerase
我该如何让VSCode简单地使用我通过“从当前设置生成颜色主题”生成的文件中的所有设置? - Jarrod Smith

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

9

MAC OS的解决方案

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


查找您的VSCode主题路径,类似于下面的内容:

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

打开.json文件并查找要更改的目标样式。
对于我的情况,我想更改空格渲染颜色
我已经找到了它,如下所示:
"editorWhitespace.foreground"
因此,在Visual Studio Code的settings.json中,
我添加了以下行(我在工作区设置中执行),

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

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


别忘了按下⌘ Command+S保存设置以生效。


3
您可以使用工作区(如下gif图像所示)在最新版本的VS Code中自定义颜色,使其更加个性化:

enter image description here

前往“设置”>“颜色自定义”>“在settings.json文件中编辑”。
通过使用“editor.tokenColorCustomizations”添加您的颜色设置。例如,要更改所有默认Dark++主题中的注释,可以添加以下代码:
"editor.tokenColorCustomizations":{
        "comments": "#fff000"
  }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接