在Visual Studio Code中更改高亮文本颜色

241

现在它是一个淡灰色的叠加层,很难看到。有没有办法更改默认颜色?

输入图片描述


2
工具 --> 选项,一般为:字体和颜色 - Austin T French
18
Visual Studio Code,不是VS 2013、2015等版本。 - duyn9uyen
(对未来的访客)另外,如果您需要完全禁用这些VSCode主题颜色中的任何一个,则必须使用颜色代码末尾的两个额外的“00”十六进制位将它们变成透明。例如,要禁用行高亮背景,请使用以下内容:“editor.lineHighlightBackground”:“#ffffff00”,。 - aderchox
1
将以下有关编程的内容从英语翻译成中文。仅返回翻译后的文本:复制并粘贴到用户设置中的有用链接:https://gist.github.com/dcts/5b2af4c8b6918e7d35c4121f11d49fb1 - Ricardo
有很多高亮插件可用...这里有一个不错的: highlight-icemode - Noam Manos
10个回答

441
将以下行添加到“编辑器:标记颜色自定义”设置中,位于settings.json文件内。
"workbench.colorCustomizations": {
    "editor.selectionBackground": "#135564",
    "editor.selectionHighlightBackground": "#135564"
},

请查看主题颜色参考获取更多选项。


13
有没有办法改变文本颜色?否则你必须找到一个背景颜色,与你的颜色方案中的每种颜色配对时都能保持可读性。这是两个问题之一,不幸的是这让我不能使用VS Code... - sleighty
7
如果您打开 "workbench.colorCustomizations": {},然后开始输入 "editor.selection",自动完成菜单将建议所有可能的键及其说明,包括选择前景。 - Tobia
3
@Tobia谢谢你的提示!我找到了它,但可能做错了什么。我将背景和前景都设置为红色,但是似乎只有背景生效(我正在使用VS Code 1.18.0)。 - sleighty
4
终端设置中的代码 "terminal.selectionBackground": "#f1eeb3a9", 表示终端文本被选中时的背景颜色为淡黄色。 - JinSnow
2
这似乎对Python无效,设置selectionHighlightBackground不会影响vscode在突出显示变量或函数使用时使用的颜色(例如)。 - jrh
显示剩余11条评论

142

上面的答案涵盖了选定文本与所选内容相同的区域,但它们忽略了当前搜索匹配项其他搜索匹配项 - 这些也存在同样的问题

"workbench.colorCustomizations": {
    "editor.findMatchBackground": "#00cc44a8", //Current SEARCH MATCH
    "editor.findMatchHighlightBackground": "#ff7b00a1" //Other SEARCH MATCHES
}

请注意,上面的设置也会影响使用“更改所有出现”CtrlF2命令时的颜色 (这是一个非常有用的命令,可以智能地选择所有字符串的出现位置,并在每个位置放置光标以进行多实例编辑)

更新:

对于那些使用流行扩展Numbered Bookmarks的人来说,您现在可以更改书签行的背景颜色 - 这使得它们易于注意到。 (您是否曾经想过一种方法来暂时标记代码中的行,就像在纸上使用荧光笔一样?)将此行添加到您的设置.json文件中(也在工作台.colorCustomizations下):

        "numberedBookmarks.lineBackground": "#007700"

不要错过Henry Zhu在这里的有用提示。我将Henry的技巧添加到上面的设置中,并发现整体效果得到了改善。(Henry的提示未包含在此答案中-请单击链接阅读Henry的其他提示)

Tom Mai通过评论补充道:

确保editor.findMatchBackgroundeditor.findMatchHighlightBackground两种颜色都具有透明度(或者具有一些alpha值),以便editor.selectionBackgroundeditor.selectionHighlightBackground显示搜索结果。你可以将editor.selectionBackgroundeditor.selectionHighlightBackground的两种颜色都保持非透明状态(没有alpha值),并且它可以完美地工作

一个典型设置文件的示例,修改后如下:

{"git.enableSmartCommit":true,"git.autofetch":true,"breadcrumbs.enabled":true,"git.confirmSync":false,"explorer.confirmDelete":false,"code-runner.saveFileBeforeRun":true,"code-runner.saveAllFilesBeforeRun":true,"workbench.activityBar.visible":true,"files.trimTrailingWhitespace":true,"telemetry.enableTelemetry":false,"scm.providers.visible":0,"editor.renameOnType":true,"workbench.colorCustomizations":{"editor.selectionBackground":"#e788ff7c","editor.selectionHighlightBackground":"#ff00005b","editor.findMatchBackground":"#00cc44a8","editor.findMatchHighlightBackground":"#ff7b00a1","numberedBookmarks.lineBackground":"#007700"}}

如何查找settings.json文件:

Depending on your platform, the user settings file is located here:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

打开settings.json文件的另一种方法:

  1. 按下Ctrl + , (逗号)来打开Settings

  2. 选择“Workbench”

  3. 选择“Settings Editor”

  4. 在顶部的搜索框中粘贴 workbench.colorCustomizations

  5. 在左侧选择“Workbench”,然后选择“Appearance”

  6. 单击右侧的链接:Edit in settings.json

参考:

https://code.visualstudio.com/api/references/theme-color#editor-colors

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

https://code.visualstudio.com/docs/getstarted/settings


2
我发现这些与我的答案结合使用可以一眼找到匹配项。请注意支持RGBA(在我的用法中,颜色值末尾的75 alpha设置): "editor.findMatchHighlightBorder": "#00ff0075"``` - Neil Gaetano Lindberg
谢谢您。我没有使用 editor.findMatchBackground,而是使用了 editor.findMatchBorder,并将其设置为 #ff0000(红色)。 - Tahir Hassan
如果你想更深入地探索这个主题,随时可以与我开启聊天。 - halfer
请确保 editor.findMatchBackgroundeditor.findMatchHighlightBackground 都具有透明度(或某些 alpha 值),以便 editor.selectionBackgroundeditor.selectionHighlightBackground 可以穿过搜索显示。您可以在一定程度上使 editor.selectionBackgroundeditor.selectionHighlightBackground 保持不透明(没有 alpha 值),它可以完美地工作。 - tom_mai78101
@tom_mai78101 謝謝你的提示,Tom!(已添加到答案中,感謝你) - cssyphus
显示剩余4条评论

43

如果有人发现这篇文章并且和我一样无法使上述配置工作,请尝试以下步骤:

  1. 进入文件 > 首选项 > 设置
  2. 在搜索框中输入 Editor token color customizations
  3. Editor token color customizations 中,点击编辑 settings.json
  4. 在右侧列中选择用户设置
  5. 将下面的代码粘贴到json对象中

请确保用您想要看到的颜色替换 #'s。

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#<color1>",
    "editor.selectionBackground": "#<color2>",
    "editor.selectionHighlightBackground": "#<color3>",
    "editor.wordHighlightBackground": "#<color4>",
    "editorCursor.foreground": "#<color5>"
},

我对以上配置的理解:

editor.lineHighlightBackground - 点击一行时,该行的背景颜色。

"editor.selectionBackground" - 使用光标选择单词的背景颜色。

"editor.selectionHighlightBackground" - 文件中其他与用光标选择的单词匹配的选定文本的背景颜色。想象一个名为foo的变量在文件中各处都被使用。然后你用光标选择其中一个'foo',页面上所有其他的'foo'将会是此变量中指定的颜色。

"editor.wordHighlightBackground" - 如果默认的单击高亮单词不起作用,则选择文本的颜色。我只看到这个值在你点击一个不自动选择的单词时才有所区别。

editorCursor.foreground - 光标的颜色。


2
这应该是答案。这些是在VSCode版本1.3+中使用的设置。 - MaylorTaylor
编辑器.lineHighlightBackground似乎不再存在了,我认为他们是在说它被有意地移除了:https://github.com/dracula/visual-studio-code/issues/68 - havlock
1
谢谢,我已经试了好几天了,没有人提到过wordHighlightBackground! - Ryan Weiss
这应该被标记为答案。10秒钟就能解决! - Nico Butler
实际上,为了完整起见,还应该添加:"editor.findMatchBackground"和"editor.findMatchHighlightBackground"。 - jerclarke
显示剩余2条评论

37

经过我的测试,设置 边框颜色 比设置背景颜色更容易阅读,Sublime Text 就是这样做的。

例如,在 settings.json 中添加以下行:

"workbench.colorCustomizations": {
    "editor.selectionHighlightBorder": "#FFFA",
},

选定的单词将会显示为:

在此输入图片描述


30

你可以通过以下步骤将其更改为您喜欢的颜色:

步骤

  1. 打开Visual Code
  2. 进入文件菜单
  3. 首选项 -> 设置

在打开设置后,您将在右侧栏中更新设置,将此代码复制并粘贴到主要方括号{ ... } 中。

"workbench.colorCustomizations": {
    "editor.selectionBackground": "#f00", // red hexadecimal code
    "editor.selectionHighlightBackground": "#fff" // white hex code
},

不能将 redwhite 作为值。 - giovannipds
1
giovannipds,这只是一个名称,用于展示您可以添加任何颜色的名称,它不是值。 - Rizwan
1
那是代码,所以它是错误的。redwhite是网页颜色,这可能会让人们感到困惑。 - giovannipds
3
在 VS Code 中,点击“文件”(File),再点击“首选项”(Preferences),然后搜索“workbench.colorCustomizations”……复制、粘贴,完成! - zipzit

16

5
过时的。 - Alex
4
已更新以参考Jakub Zawiślak的答案,适用于现代版本的VSCode。 - Matt Bierner

5
如果有人发现自己阅读了@FujiRoyale的回答,但其他回答都没有起作用,并想知道为什么他/她的也不起作用,但由于它更近,所以想知道为什么,我遵循了他们的回答,并且(使用v1.18的vscode)将其设置为“用户设置”:
{
    // Is git enabled
    "git.enabled": true,
    // Path to the git executable
    "git.path": "C:\\Users\\t606964\\AppData\\Local\\Programs\\Git\\mingw64\\bin\\git.exe",
    "workbench.startupEditor": "newUntitledFile",
    // other settings
    //
    "editor.fontSize": 12,
    "editor.tabSize": 2,
    "git.confirmSync": false,
    "workbench.colorTheme": "Monokai",
    "editor.fontWeight": "bold",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "files.autoSave": "off",
    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#f00",
        "editor.selectionBackground": "#0f0",
        "editor.wordHighlightBackground": "#00f",
        "editorCursor.foreground": "#ff0"
    }
}

请注意缩进和逗号的使用,并删除其答案中的双引号(我必须进行调整才能正确理解,这并不是从答案中很清楚)。无需重新启动vscode,但值得一试的是打开文件>自动保存,看看是否开始出现主要颜色的高亮显示,然后选择更好的颜色来突出显示。

您还可以通过粘贴内容到工作区设置使其生效。

"workbench.colorCustomizations": {
    "editor.lineHighlightBackground": "#f00",
    "editor.selectionBackground": "#0f0",
    "editor.wordHighlightBackground": "#00f",
    "editorCursor.foreground": "#ff0"
}

在右侧设置面板中,现有的 {} 之间。


2

您尝试使用/添加过Ryuichi Inagaki的

您可以选择/高亮一个选择块,右键单击<开关高亮显示>以给它一个独特的颜色,然后继续并重复处理其他选择块,并为它们分别提供不同的明显颜色,我发现这非常有用!


1
你好,欢迎来到SO!请阅读tour如何撰写优质答案? 请考虑添加代码片段以展示如何使用此扩展并详细说明它如何解决问题。 - Tomer Shetah

0

您还可以更改选择/搜索的边框,请参见以下配置,其中包含本主题中已经找到的其他值:

"workbench.colorCustomizations": {
        "editor.selectionBackground": "#e788ff7c",
        "editor.selectionHighlightBackground": "#ff00005b",
        "editor.selectionHighlightBorder": "#fbf300e0", ##border when you select
        "editor.findMatchBackground": "#f352fe8f",
        "editor.findMatchHighlightBackground": "#8e52fe9e",
        "editor.findMatchHighlightBorder": "#fbf300e0" ##border when you search for something
        }

0

补充:

用户还可以为特定主题进行设置。请参阅官方文档中关于主题自定义的内容

如果您经常在暗色和亮色主题之间切换,并且希望分别设置不同的边框颜色,则此功能非常实用。

例如,对于暗色主题,您想要设置更亮的背景或边框颜色,而对于亮色主题,您想要设置深色,您还可以使用通配符来匹配所有暗色主题(或至少那些名称中包含“dark”的主题):

"workbench.colorCustomizations": {
  "[Visual Studio Dark]": { "editor.selectionHighlightBorder": "#ffffff" },
  "[Visual Studio Light]": { "editor.selectionHighlightBorder": "#000000" },
  "[*dark*]": { "editor.selectionHighlightBorder": "#ffffff" }
}

虽然我不确定通配符是否区分大小写,现在也适用于“Dark”,你可以试试。

另一个例子来自文档:

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

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