VSCode 如何自定义编辑器的选中内容颜色 VSCode 编辑器选中内容颜色的自定义教程​

自定义vscode选中颜色需在settings.json中修改workbench.colorcustomizations，关键属性包括editor.selectionbackground（鼠标拖选色）、editor.wordhighlightbackground（单词高亮色）、editor.wordhighlightstrongbackground（强高亮色）和editor.linehighlightbackground（当前行高亮色）；2. 应用方法是打开vscode设置界面（ctrl+, 或 cmd+,），点击“打开设置（json）”图标编辑settings.json文件，粘贴或修改对应配置，支持十六进制颜色值（含透明度）或css颜色名称，保存后即时生效；3. 自定义选中颜色可提升视觉舒适度、减少长时间编码的眼疲劳，增强目标定位效率，体现个性化工作环境，甚至有助于团队视觉统一；4. 其他值得调整的视觉元素包括括号匹配高亮、滚动条颜色、minimap显示效果以及侧边栏、状态栏等区域的工作台颜色；5. 常见误区包括颜色对比度不足、过于鲜艳刺眼、忽略多显示器差异和频繁更换配置，建议遵循高对比度原则、保持整体色系协调、善用透明度、少量多次调整并优先优化焦点元素。

VSCode中自定义编辑器的选中内容颜色，主要是通过修改其用户设置文件（

settings.json

）中的

workbench.colorCustomizations

属性来实现。具体来说，你需要关注

editor.selectionBackground

和

editor.wordHighlightBackground

这两个键值。前者控制你鼠标拖选时的背景色，后者则是当光标停留在某个单词上时，VSCode自动高亮显示该单词所有出现位置的背景色。

{     "workbench.colorCustomizations": {         "editor.selectionBackground": "#6A5ACD", // 鼠标拖选的背景色，这里是石板蓝         "editor.wordHighlightBackground": "#FFD700", // 单词高亮背景色，这里是金色         "editor.wordHighlightStrongBackground": "#FF6347", // 强高亮（如查找结果）背景色         "editor.lineHighlightBackground": "#333333" // 当前行高亮背景色，可选     },     // 其他你的VSCode设置... }

要应用这些设置，你需要打开VSCode的设置界面（通常是

Ctrl + ,

或

Cmd + ,

），然后点击右上角的“打开设置（JSON）”图标，这会打开你的

settings.json

文件。将上述代码块粘贴进去，或者修改已有的

workbench.colorCustomizations

部分。颜色值可以使用十六进制代码（如

#RRGGBB

或

#AARRGGBB

，A代表透明度），也可以是CSS颜色名称（如

"red"

）。改完保存，效果会即时生效。

为什么我需要自定义选中颜色？

说起来，默认的选中颜色对我个人而言，有时在某些主题下确实显得不够突出，或者说，在长时间编码后，那种默认的蓝色或灰色，看久了眼睛会有点疲劳。我发现很多人都有类似的感觉，这不仅仅是审美偏好那么简单。自定义选中颜色，首先是为了视觉舒适度。一个对比度适中、不刺眼的颜色，能显著减少长时间阅读代码带来的眼睛负担。

其次，它关乎工作效率。想想看，当你快速浏览代码，或者在大量文本中寻找特定高亮时，一个醒目的、符合你个人习惯的选中色能让你一眼定位目标，避免误读。比如，我习惯把

editor.wordHighlightBackground

设成一个略带橙色的暖色调，这样当我在一个大文件里跳转到某个变量的定义处，所有相关的引用会瞬间跳出来，非常直观。这比默认的那个可能和背景色混淆的颜色要强太多了。

再者，这是一种个性化与沉浸感的体现。VSCode是我们程序员的“第二大脑”，一个高度定制化的工作环境，能让人感觉更自在、更投入。就像有人喜欢把桌面壁纸换成自己喜欢的图案一样，编辑器里的颜色调整，也是在打造一个完全属于自己的“数字空间”。甚至有些团队会统一一套VSCode的主题和颜色配置，这在视觉上也能增强团队的凝聚力，虽然这听起来有点玄乎，但心理暗示作用确实存在。

除了选中颜色，VSCode 还有哪些值得调整的视觉元素？

除了选中内容和单词高亮，VSCode里还有一大堆视觉元素可以折腾，而且很多调整带来的体验提升是实打实的。我个人觉得，这些地方的自定义，甚至比单纯改个选中色更重要，因为它直接影响到你对代码结构的理解和日常操作的流畅性。

首先是当前行高亮（

editor.lineHighlightBackground

）。默认的可能不太明显，或者在某些深色主题下，你很难一眼看出光标当前在哪一行。我通常会把它调成一个非常浅的、半透明的灰色或者主题色系的深色，这样既能突出当前行，又不会过于抢眼。

然后是括号匹配高亮（

editor.matchingBracketBackground

）。写代码时，括号的匹配简直是灵魂所在。一个清晰的括号高亮能让你迅速找到对应的开闭括号，尤其是在多层嵌套的代码块里，这能省去你很多找错的时间。

滚动条（

scrollbarSlider.background

scrollbarSlider.hoverBackground

scrollbarSlider.activeBackground

）也值得一调。默认的滚动条在某些主题下可能显得很细小，或者颜色不明显。把它调得稍微宽一点，颜色更突出一点，在快速定位代码位置时会方便很多。

还有Minimap（代码小地图）。如果你经常使用它来概览文件结构，那么Minimap的背景色、高亮色（

minimap.selectionHighlight

）等都可以调整，让它更好地融入整体界面，或者在需要时更醒目。

最后，不得不提的是工作台颜色（

workbench.colorCustomizations

activityBar.*

sideBar.*

statusBar.*

titleBar.*

）。这些控制着VSCode侧边栏、状态栏、标题栏等区域的颜色。我喜欢把状态栏的颜色调成和主题色系一致，或者在测试环境、生产环境等不同项目中，通过插件配合，让状态栏显示不同的颜色，这样一眼就能知道当前是在哪个环境，避免一些低级错误。这就像给你的工作台换上不同的“皮肤”，让你的开发环境更具辨识度。

自定义颜色时，有哪些常见误区或建议？

在自定义VSCode颜色时，我踩过不少坑，也总结了一些小经验，希望能帮大家避开一些常见的误区。

一个最常见的误区就是过度追求个性化而牺牲可读性。有时候我们看到一个很酷的颜色，就想把它应用到编辑器的某个元素上，结果发现这个颜色和背景色对比度太低，或者颜色过于鲜艳刺眼，导致代码根本看不清，或者看久了眼睛非常疲劳。比如，把选中色设成和代码颜色相近的颜色，或者用纯荧光色，这种做法可能短期内觉得新奇，但长期使用绝对是折磨。我的建议是，保持高对比度是王道。选中色应该能清晰地从背景色中区分出来，但又不能过于突兀，影响到代码本身的阅读。

另一个误区是忽略不同显示器和光照环境的影响。你在一个显示器上看起来很舒服的颜色，换到另一个显示器上，或者在不同的光照条件下，可能会完全变样。我通常会把我的配置在笔记本和外接显示器上都测试一遍，确保在不同环境下都能保持良好的视觉效果。

此外，频繁更换颜色配置也是一个不太好的习惯。一旦你找到一套自己觉得舒服的颜色方案，最好就稳定下来。人的眼睛和大脑需要时间去适应和习惯一套视觉模式，频繁更改反而会增加认知负担，影响效率。

我的建议是：

1. 从主题色系出发：如果你使用一个特定的VSCode主题（比如One Dark Pro, Dracula等），那么在自定义颜色时，尽量选择与该主题色系相协调的颜色。这样能保持整体界面的统一性和美感。
2. 善用透明度：很多颜色属性都支持RGBA值（

   #RRGGBBAA

   ），即可以设置透明度。利用透明度能让颜色显得更柔和，不那么“硬”，也能更好地融入背景。例如，

   editor.lineHighlightBackground

   设置成半透明的灰色，效果往往比纯灰色要好。

3. 少量多次调整：不要一次性调整太多颜色。每次调整一两个关键的颜色，然后使用几天，感受一下效果，再决定是否需要进一步调整。
4. 参考专业设计：如果你对颜色搭配不太有把握，可以参考一些流行的UI设计指南，或者看看其他开发者分享的VSCode主题配置。很多时候，这些主题的设计者已经帮你考虑了色彩的搭配和对比度问题。
5. 关注焦点元素：优先调整那些你平时最常关注、最影响你操作的元素，比如选中色、行高亮、单词高亮等。这些地方的优化带来的收益是最大的。