如何编辑 Visual Studio Code 的默认深色主题？
Posted
技术标签:
【中文标题】如何编辑 Visual Studio Code 的默认深色主题？【英文标题】：How to edit default dark theme for Visual Studio Code? 【发布时间】：2016-05-11 23:02:34 【问题描述】：我使用的是 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++ 语言中，哪些代码块负责对象成员的颜色、指针的成员以及类和结构的名称？
【问题讨论】：
对于任何来到这里的人：您不需要寻找、修改或创建任何主题文件。可以在用户设置中使用workbench.colorCustomizations 和editor.tokenColorCustomizations 修改所有内容：code.visualstudio.com/docs/getstarted/…。
一个也可以坚持陈旧，但正在开发允许我们添加自定义全局 CSS 的功能，例如 Atoms Edit -> Stylesheet... 对问题的最后一次更改是 3 月 github.com/Microsoft/vscode/issues/459 。令人失望的是它对 cmets 关闭。当前的 API 不允许扩展来修改全局 CSS...所以我们必须等待，或者手动将 CSS 粘贴到开发人员工具中，例如 Caveman。
【参考方案1】：
在 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"
【讨论】：
但是如果超出了tokenColorCustomizations，我该怎么办？ 在哪里可以找到“editor.tokenColorCustomizations”中所有可用选项的列表？ 哦，找到了code.visualstudio.com/api/references/theme-color#editor-colors 我的编辑由于某种原因被拒绝，但为了使这个答案专门解决 OP 更改特定主题的愿望，您可以指定主题并修改颜色而不更改主题的文件：“workbench.colorCustomizations” : "[Kimbie Dark]": "activityBar.foreground":"#472c0c" 设置中叫做“Workbench: Color Customizations”【参考方案2】：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"
【讨论】：
问题问的是如何自定义默认的深色主题，而不是如何切换到另一个现有的。 感谢您的指出，前几天我正在寻找更改默认主题，匆匆忙忙，我以为问题是关于更改主题。虽然有很多其他解决方案为此建议，但这里是编辑默认主题的一种方法，可能有人已经发布了，也可能没有，继续在社区分享，干杯【参考方案3】：在将 VS Code 作为 snap 包安装的 Ubuntu 中，我在 /snap/code/55/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_plus.json 找到了主题
【讨论】：
指定您使用的安装方法会有所帮助：我猜是 snap 包，但是使用apt 安装 vscode 时，路径可能会有所不同。【参考方案4】：
最新版本的 VS 代码，您可以使用工作台自定义颜色，使其更加个性化，如下 gif 图像所示：
转到设置 > 颜色自定义 > 在settings.json中编辑
添加使用editor.tokenColorCustomizations 的颜色设置，例如更改所有默认 Dark++ 主题的 cmets，您可以添加以下代码：
"editor.tokenColorCustomizations":
"comments": "#fff000"
【讨论】：
【参考方案5】：tldr
您可以通过切换到主题然后从命令面板中选择Developer > Generate Color Theme From Current Settings 来获取任何主题（包括内置主题）的颜色。
详情
通过从命令面板中选择 Preferences: Color Theme 然后选择主题来切换到您想要修改的内置主题。
通过从命令面板中选择Developer > Generate Color Theme From Current Settings 来获取该主题的颜色。使用后缀-color-theme.jsonc 保存文件。 color-theme 部分将在编辑文件时启用颜色选择器小部件，jsonc 将文件类型设置为 JSON with comments。
从命令面板中选择Preferences: Open Settings (JSON) 以打开您的settings.json 文件。然后将所需的更改添加到 workbench.colorCustomizations 或 tokenColorCustomizations 部分。
[])，值是设置的关联数组。
主题名称可以在settings.jsonworkbench.colorTheme找到。
例如，以下自定义主题从颜色主题列表中列为Dark+ (default dark)。它将编辑器背景设置为接近黑色，并将 cmets 的语法突出显示为暗灰色。
// settings.json
"workbench.colorCustomizations":
"[Default Dark+]":
"editor.background": "#19191f"
,
"editor.tokenColorCustomizations":
"[Default Dark+]":
"comments": "#5F6167"
,
【讨论】：
这是覆盖某些颜色的正确方法。谢谢【参考方案6】：我来这里是为了找到一种编辑主题的方法，但在我的 Mac 上找不到它。 经过一番深入研究，终于找到了安装地点：
~/.vscode/extensions
所有扩展都在里面！
【讨论】：
【参考方案7】：你要找的文件在，
Microsoft VS Code\resources\app\extensions\theme-defaults\themes
在 Windows 上搜索文件名 dark_vs.json 以在任何其他系统上找到它。
更新：
使用新版本的 VSCode，您无需寻找设置文件来自定义主题。现在您可以使用workbench.colorCustomizations 和editor.tokenColorCustomizations 用户设置自定义您的颜色主题。可以在here找到有关此事的文档。
【讨论】：
在 Linux 上，它位于/usr/share/code/resources/app/extensions/theme-defaults/themes
在 Arch Linux 上，它（开源版本）在 /usr/lib/code/extensions/theme-defaults/themes
默认VS Code安装在C:\users\username\AppData\Local\Programs\Microsoft VS Code
这个答案的更新是一个合理的建议。我发现如果你直接编辑主题文件，它们可以/将会在更新 VS Code 时被覆盖。
也许这对其他人来说是显而易见的，但在 Mac 上，它位于 /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-defaults【参考方案8】：
MAC 操作系统解决方案
我不确定这个答案是否适合这里，但我想为 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保存设置才能生效。
【讨论】：
【参考方案9】：正如其他人所说，您需要覆盖 settings.json 文件中的 editor.tokenColorCustomizations 或 workbench.colorCustomizations 设置。在这里你可以选择一个基本主题，比如深渊，并且只覆盖你想要改变的东西。你可以很容易地覆盖很少的东西，比如函数、字符串颜色等。
例如为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
【讨论】：
感谢您的出色回答！这对我帮助很大！ 如何更改 .css 和 .scss 文件的属性值颜色？ @Varun【参考方案10】：最简单的方法是编辑用户设置并自定义workbench.colorCustomizations
如果你想制作你的主题
还有修改当前主题的选项，它将复制当前主题设置并让您将其保存为*.color-theme.json JSON5 文件
【讨论】：
想重新排序您的答案，以便获得更好、更简单的答案吗？ =] 你如何将它安装为主题？【参考方案11】：在 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
【讨论】：
这样您可以覆盖编辑器本身的颜色，但不能覆盖某些关键字的颜色（例如：字符串颜色）。【参考方案12】：docs 现在有一个关于此的完整部分。
基本上，使用npm 安装yo，然后运行命令yo code，您将获得一个基于文本的小向导——其中一个选项是创建和编辑默认的副本黑暗的计划。
【讨论】：
【参考方案13】：就主题而言，VS Code 与 Sublime 一样可编辑。您可以编辑 VS 代码附带的任何默认主题。您只需要知道在哪里可以找到主题文件。
旁注：我喜欢 Monokai 主题。然而，我只想改变它的背景。我不喜欢深灰色的背景。相反，我认为纯黑色背景的对比度要好得多。代码弹出更多。
无论如何，我寻找主题文件并在以下位置（在 Windows 中）找到它：
c:\Program Files (x86)\Microsoft VS 代码\resources\app\extensions\theme-monokai\themes\
在那个文件夹中，我找到了 Monokai.tmTheme 文件并修改了第一个背景键如下：
<key>background</key>
<string>#000000</string>
主题文件中有几个“背景”键，请确保编辑正确。我编辑的那个在最上面。我想是第 12 行。
【讨论】：
Ubuntu 安装位置如/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_vs.json
对于 mac，我发现更新这些路径中的文件有效：/Users/user-name/.vscode/extensions/azemoh.one-monokai-0.3.3/themes/OneMonokai-color-theme.json cmd+shift+p 并键入 reload window cmd 以立即尝试更改:)
修改主题背景也可以通过"workbench.colorCustomizations": "[Theme You Want to Update]": "editor.background": "#000000" 在用户设置中完成。
对于 Windows 上的 64 位 VS Code，基本路径为 C:\Program Files\Microsoft VS Code\resources\app\extensions\ ，通常后跟 theme-....
用"workbench.colorCustomizations": "editor.background": "#000" ,修改用户设置中的主题。以下是您可以进行的所有不同自定义：code.visualstudio.com/api/references/theme-color【参考方案14】：
您不能“编辑”默认主题，它们被“锁定”
但是，您可以将其复制到您自己的自定义主题中，并进行您想要的确切修改。
有关详细信息，请参阅以下文章： 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：澄清一下：
下载此文件：https://github.com/Microsoft/vscode/blob/80f8000c10b4234c7b027dccfd627442623902d2/extensions/theme-colorful-defaults/themes/dark_plus.tmTheme 随意修改 使用Yo代码https://code.visualstudio.com/docs/tools/yocode生成主题 将该主题复制到您的扩展文件夹中。或者，如果您想分享，可以在 VS Code 市场上发布。【讨论】：
我可以从哪里复制它？在你发给我的文章中没有任何关于它的内容。而且我不想为这样的琐碎事情安装任何东西，比如稍微改变语法突出显示 - 特别是当我可以打开正确的文件并修改几行代码时，如果默认主题没有被锁定。此外，使用 Yeoman Generator 生成新主题需要另一个主题的 .tmTheme 文件 - ColorSublime 网站上没有 Visual Studio 深色主题，我无法访问 VSC 中的“锁定主题”。 也许我可以从“C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\cpp”编辑 c++.plist 文件？但是我应该更改哪些代码块？或者也许某个地方有一个 VSC 默认深色主题的源文件，我可以用它来制作我自己的自定义主题？ 你不能编辑它，因为我相信它保存在源代码中。但是，您可以复制/粘贴它并更改几行。它位于 GitHub 上。我为你找到了它：github.com/Microsoft/vscode/tree/… 已编辑的带有链接的答案 可以编辑我提到的 c++.plist 文件，我检查过了。我从有关着色器的文章中了解到，它是 C++ 语言的标准着色器文件。如果我错了纠正我。但是，如果您仍在谈论编辑默认主题-是的，我知道我不能这样做，我从您的第一个答案中理解了有关它的句子。感谢您在 GitHub 和链接上提供有关源代码的信息 - 但我检查了那里的主题不是默认主题，而是经过修改的、更丰富多彩的变体。不幸的是，不是我想要的。 但我偶然发现，扩展库中的“Xcodedefault”主题与默认的深色主题具有相同的语法突出显示。因为它现在在我磁盘的扩展文件夹中，安装后我可以修改它，就像我想修改默认的深色主题一样。所以，我的问题解决了。以上是关于如何编辑 Visual Studio Code 的默认深色主题？的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Visual Studio Code 中的面板移动到右侧？