如何编辑 Visual Studio 代码的默认深色主题?
How to edit default dark theme for Visual Studio Code?
我正在使用 Windows 7 64 位。
有没有办法在 Visual Studio 代码中编辑默认深色主题?在 %USERPROFILE%\.vscode
文件夹中只有扩展的主题,而在安装路径中(我使用默认,C:\Program Files (x86)\Microsoft VS Code
)在 \resources\app\extensions
中有一些标准主题的文件,如 Kimbie Dark,Solarized Dark/Light 或 Monokai 的变体,但没有默认的深色主题。
但如果毕竟有编辑的可能,那么在C++语言中,哪些代码块负责对象成员的颜色、指针成员和class的名称以及结构体的名称?
您不能 "edit" 默认主题,它们是 "locked in"
但是,您可以将其复制到您自己的自定义主题中,并进行您想要的精确修改。
有关详细信息,请参阅以下文章:
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 Code 生成主题 https://code.visualstudio.com/docs/tools/yocode
- 将该主题复制到您的扩展文件夹中。或者,如果您想分享,请将其发布到 VS Code 市场上。
就主题而言,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>
主题文件中有几个 'background' 键,请确保您编辑了正确的键。我编辑的那个在最上面。我认为第12行。
docs 现在有一个完整的部分是关于这个的。
基本上,使用 npm
安装 yo
,然后 运行 命令 yo code
,你会得到一个基于文本的小向导 -- 其中之一选项将是创建和编辑默认深色方案的副本。
您要查找的文件位于,
Microsoft VS Code\resources\app\extensions\theme-defaults\themes
在 Windows 上搜索文件名 dark_vs.json
以在任何其他系统上找到它。
更新:
使用新版本的 VSCode,您无需寻找设置文件来自定义主题。现在您可以使用 workbench.colorCustomizations
和 editor.tokenColorCustomizations
用户设置自定义您的颜色主题。可以找到有关此事的文档 here.
MAC的解决方案OS
我不确定这个答案是否适合这里,但我想为 MAC 用户分享一个解决方案,如果我开始一个新问题并在那里回答自己,这看起来很尴尬.
寻找您的 VSCode 主题路径,如下所示:
..your_install_location/Visual Studio
Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json
打开 .json 文件并查找要更改的目标样式。
对于我的情况,我想更改空白渲染颜色
我找到了as
"editorWhitespace.foreground"
so 在 Visual Studio 代码中的 settings.json
下,
我添加了以下几行(我在工作区设置中做),
"workbench.colorCustomizations": {
"editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}
解决方案指导自:https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme
别忘了⌘命令+S保存设置生效
在 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 and here: https://www.sublimetext.com/docs/3/scope_naming.html
在 VS 代码 'User Settings' 中,您可以使用以下标签编辑可见颜色(这是一个示例,还有更多标签):
"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"
}
最简单的方法是编辑用户设置并自定义 workbench.colorCustomizations
如果你想制作你的主题
还有修改当前主题的选项,它会复制当前的主题设置并让您将其保存为 *.color-theme.json
JSON5 文件
正如其他人所说,您需要覆盖 settings.json 文件中的 editor.tokenColorCustomizations
或 workbench.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
我来这里是为了寻找编辑主题的方法,但在我的 Mac 上找不到。
经过深入研究,终于找到了安装位置:
~/.vscode/extensions
里面有所有扩展!
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.json
at workbench.colorTheme
中找到。
例如,以下自定义颜色主题列表中列为 Dark+ (default dark)
的主题。它将编辑器背景设置为接近黑色,并将注释的语法突出显示设置为暗灰色。
// settings.json
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.background": "#19191f"
}
},
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"comments": "#5F6167"
}
},
在 Ubuntu 中,将 VS Code 作为 snap 包安装,我在 /snap/code/55/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_plus.json
找到了主题
最新版本的 VS code 您可以使用 workbench 自定义颜色以使其更加个性化,如下面的 gif 图片:
转到设置 > 颜色自定义 > 在settings.json[中编辑=13=]
添加使用 editor.tokenColorCustomizations
的颜色设置,例如更改所有默认 Dark++ 主题的注释,您可以添加此代码:
"editor.tokenColorCustomizations":{
"comments": "#fff000"
}
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"}
我正在使用 Windows 7 64 位。
有没有办法在 Visual Studio 代码中编辑默认深色主题?在 %USERPROFILE%\.vscode
文件夹中只有扩展的主题,而在安装路径中(我使用默认,C:\Program Files (x86)\Microsoft VS Code
)在 \resources\app\extensions
中有一些标准主题的文件,如 Kimbie Dark,Solarized Dark/Light 或 Monokai 的变体,但没有默认的深色主题。
但如果毕竟有编辑的可能,那么在C++语言中,哪些代码块负责对象成员的颜色、指针成员和class的名称以及结构体的名称?
您不能 "edit" 默认主题,它们是 "locked in"
但是,您可以将其复制到您自己的自定义主题中,并进行您想要的精确修改。
有关详细信息,请参阅以下文章: 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 Code 生成主题 https://code.visualstudio.com/docs/tools/yocode
- 将该主题复制到您的扩展文件夹中。或者,如果您想分享,请将其发布到 VS Code 市场上。
就主题而言,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>
主题文件中有几个 'background' 键,请确保您编辑了正确的键。我编辑的那个在最上面。我认为第12行。
docs 现在有一个完整的部分是关于这个的。
基本上,使用 npm
安装 yo
,然后 运行 命令 yo code
,你会得到一个基于文本的小向导 -- 其中之一选项将是创建和编辑默认深色方案的副本。
您要查找的文件位于,
Microsoft VS Code\resources\app\extensions\theme-defaults\themes
在 Windows 上搜索文件名 dark_vs.json
以在任何其他系统上找到它。
更新:
使用新版本的 VSCode,您无需寻找设置文件来自定义主题。现在您可以使用 workbench.colorCustomizations
和 editor.tokenColorCustomizations
用户设置自定义您的颜色主题。可以找到有关此事的文档 here.
MAC的解决方案OS
我不确定这个答案是否适合这里,但我想为 MAC 用户分享一个解决方案,如果我开始一个新问题并在那里回答自己,这看起来很尴尬.
寻找您的 VSCode 主题路径,如下所示:
..your_install_location/Visual Studio Code.app/Contents/Resources/app/extensions/theme-name/themes/theme_file.json
打开 .json 文件并查找要更改的目标样式。
对于我的情况,我想更改空白渲染颜色
我找到了as"editorWhitespace.foreground"
so 在 Visual Studio 代码中的 settings.json
下,
我添加了以下几行(我在工作区设置中做),
"workbench.colorCustomizations": {
"editorWhitespace.foreground": "#93A1A130" // stand as #RRGGBBAA
}
解决方案指导自:https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme
别忘了⌘命令+S保存设置生效
在 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 and here: https://www.sublimetext.com/docs/3/scope_naming.html
在 VS 代码 'User Settings' 中,您可以使用以下标签编辑可见颜色(这是一个示例,还有更多标签):
"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"
}
最简单的方法是编辑用户设置并自定义 workbench.colorCustomizations
如果你想制作你的主题
还有修改当前主题的选项,它会复制当前的主题设置并让您将其保存为 *.color-theme.json
JSON5 文件
正如其他人所说,您需要覆盖 settings.json 文件中的 editor.tokenColorCustomizations
或 workbench.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
我来这里是为了寻找编辑主题的方法,但在我的 Mac 上找不到。 经过深入研究,终于找到了安装位置:
~/.vscode/extensions
里面有所有扩展!
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.json
atworkbench.colorTheme
中找到。
- 要将设置限制为仅此主题,请使用关联数组,其中键是括号中的主题名称 (
例如,以下自定义颜色主题列表中列为 Dark+ (default dark)
的主题。它将编辑器背景设置为接近黑色,并将注释的语法突出显示设置为暗灰色。
// settings.json
"workbench.colorCustomizations": {
"[Default Dark+]": {
"editor.background": "#19191f"
}
},
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"comments": "#5F6167"
}
},
在 Ubuntu 中,将 VS Code 作为 snap 包安装,我在 /snap/code/55/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_plus.json
最新版本的 VS code 您可以使用 workbench 自定义颜色以使其更加个性化,如下面的 gif 图片:
转到设置 > 颜色自定义 > 在settings.json[中编辑=13=]
添加使用 editor.tokenColorCustomizations
的颜色设置,例如更改所有默认 Dark++ 主题的注释,您可以添加此代码:
"editor.tokenColorCustomizations":{
"comments": "#fff000"
}
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"}