ChatGPT解决这个技术问题 Extra ChatGPT

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

我正在使用 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.colorCustomizationseditor.tokenColorCustomizations 修改所有内容:code.visualstudio.com/docs/getstarted/…
人们也可以坚持陈旧,但正在开发允许我们添加自定义全局 CSS 的功能,例如 Atoms Edit -> Stylesheet... 对问题的最后一次更改是 3 月 github.com/Microsoft/vscode/issues/459 。令人失望的是它已关闭评论。当前的 API 不允许扩展来修改全局 CSS……所以我们必须等待,或者手动将 CSS 粘贴到开发者工具中,比如 Caveman。

n
nik7

在 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”中所有可用选项的列表?
我的编辑由于某种原因被拒绝,但要使这个答案专门解决 OP 更改特定主题的愿望,您可以指定主题并修改颜色而不更改主题的文件:“workbench.colorCustomizations”:{“[Kimbie Dark]” : { "activityBar.foreground":"#472c0c" } }
它在设置中称为“工作台:颜色自定义”
p
paarandika

您要查找的文件位于,

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

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

更新:

使用新版本的 VSCode,您无需寻找设置文件来自定义主题。现在您可以使用 workbench.colorCustomizationseditor.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
i
iviouse

就主题而言,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 行。


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
T
Tobiah Zarlez

您不能“编辑”默认主题,它们被“锁定”

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

有关详细信息,请参阅以下文章: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 市场上。


我可以从哪里复制它?在你发给我的文章中没有任何关于它的内容。而且我不想为这样的琐碎事情安装任何东西,比如稍微改变语法突出显示 - 特别是当我可以打开正确的文件并修改几行代码时,如果默认主题没有被锁定。此外,使用 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”主题与默认的深色主题具有相同的语法突出显示。因为它现在在我磁盘的扩展文件夹中,安装后我可以修改它,就像我想修改默认的深色主题一样。所以,我的问题解决了。
J
Jay Wick

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

https://i.stack.imgur.com/8h9tt.png

如果你想做你的主题

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

https://i.stack.imgur.com/CAj2o.png


想重新排序你的答案,以便更好、更简单的答案是第一位的吗? =]
然后如何将其安装为主题?
V
Varun Achar

正如其他人所说,您需要覆盖 settings.json 文件中的 editor.tokenColorCustomizationsworkbench.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 文件的属性值的颜色? @瓦伦
n
needfulthing

任何颜色主题都可以在 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


有了它,您可以覆盖编辑器本身的颜色,但不能覆盖某些关键字的颜色(例如:字符串颜色)。
A
Alissa H

tldr

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

细节

通过从命令面板中选择 Preferences: Color Theme 然后选择主题来切换到您希望修改的内置主题。通过从命令面板中选择 Developer > Generate Color Theme From Current Settings 来获取该主题的颜色。使用后缀 -color-theme.jsonc 保存文件。颜色主题部分将在编辑文件时启用颜色选择器小部件,并且 jsonc 将文件类型设置为带有注释的 JSON。从命令面板中选择 Preferences: Open Settings (JSON) 打开您的 settings.json 文件。然后将所需的更改添加到 workbench.colorCustomizations 或 tokenColorCustomizations 部分。要将设置限制为仅此主题,请使用关联数组,其中键是括号 ([]) 中的主题名称,值是设置的关联数组。可以在 workbench.colorTheme 的 settings.json 中找到主题名称。

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

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


这是覆盖某些颜色的正确方法。谢谢
如何使 vscode 简单地使用我通过“从当前设置生成颜色主题”生成的文件中的所有设置?
e
elliotching

MAC操作系统解决方案

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

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

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

打开 .json 文件并查找要更改的目标样式。
就我而言,我想更改空白渲染颜色
我发现它是
"editorWhitespace.foreground"
所以在 { 2} 在 Visual Studio Code 中,
我添加了以下几行(我在工作区设置中添加),

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

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

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


L
Lee Goddard

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

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


C
Code Knox

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

~/.vscode/extensions

里面的所有扩展!


N
NJENGAH

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

https://i.stack.imgur.com/GJlnD.gif

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

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

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

S
Skilled Knight
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​"}

该问题询问如何自定义默认的深色主题,而不是如何切换到另一个现有的主题。
感谢您指出,前几天我正在寻找更改默认主题,匆忙中,我认为问题是关于更改主题。尽管有很多其他解决方案为此建议,这里是编辑默认主题的一种方法,有人可能已经发布或可能没有,在社区中分享继续,干杯
M
Mikhail

在将 VS Code 作为 snap 包安装的 Ubuntu 中,我在 /snap/code/55/usr/share/code/resources/app/extensions/theme-defaults/themes/dark_plus.json 找到了主题


指定您使用的安装方法会很有帮助:我猜它是 snap 包,但是当使用 apt 安装 vscode 时,路径可能会有所不同。