如何在Visual Studio Code的Abyss主题中自定义HTML标签颜色？

我懂你已经在调整Abyss主题的令牌颜色了，要搞定HTML标签的颜色其实不难，核心是找对对应的令牌名称就行。

你可以直接在现有的editor.tokenColorCustomizations配置里，针对Abyss主题添加HTML标签相关的令牌规则，参考下面的示例：

"editor.tokenColorCustomizations": {
  "[Abyss]": {
    "keywords": "#7ea4df",
    // 调整HTML标签整体的颜色（包括尖括号和标签名）
    "tag": "#a8d1ff",
    // 单独修改标签名称的颜色（比如 <p> 里的 "p"）
    "tag.name": "#c2e0ff",
    // 单独修改标签的尖括号 "<" 和 ">" 的颜色
    "tag.decorator": "#8ab4f8"
  }
}

要是你不确定某个元素对应的具体令牌名，VS Code自带的工具能帮你精准定位：

• 按下Ctrl+Shift+P（Windows/Linux）或者Cmd+Shift+P（Mac）打开命令面板
• 搜索并选择「Developer: Inspect Editor Tokens and Scopes」
• 把鼠标悬停在你想修改的HTML标签元素上，面板里就会显示对应的令牌信息，直接用这个信息写配置就准没错。

修改完配置保存后，VS Code会自动刷新主题效果，你马上就能看到调整后的颜色啦。

内容的提问来源于stack exchange，提问作者see sharper