如何修改Visual Studio Code主题中命令面板的高亮颜色？

算力阿峰

2026-10-15

解决方案

你可以通过以下两种方式调整命令面板的高亮配色，两种方式二选一即可：

方式1：修改.tmTheme主题文件

VS Code对TextMate主题做了扩展支持，可直接在原主题文件中新增UI配色规则：

打开你的.tmTheme文件，找到最外层<key>settings</key>对应的<array>，第一个无<key>scope</key>的<dict>就是全局配置块
在该块的<key>settings</key>对应的子<dict>中添加以下配置，色值可根据你的主题风格自行调整：

<!-- 命令面板选中项背景色 -->
<key>quickInputList.focusBackground</key>
<string>#2D4F67</string>
<!-- 命令面板选中项文字颜色 -->
<key>quickInputList.focusForeground</key>
<string>#FFFFFF</string>
<!-- 命令面板选中项中搜索匹配字符的高亮颜色 -->
<key>quickInputList.focusHighlightForeground</key>
<string>#FFD700</string>

方式2：在VS Code设置中覆盖配色（无需修改原主题文件）

如果不想改动原主题文件，可以直接修改VS Code用户配置实现定制：

按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入打开用户设置(JSON)并回车
在settings.json中添加以下配置，注意将[你的主题名称]替换为你当前使用的主题的完整名称：

"workbench.colorCustomizations": {
    "[你的主题名称]": {
        "quickInputList.focusBackground": "#2D4F67",
        "quickInputList.focusForeground": "#FFFFFF",
        "quickInputList.focusHighlightForeground": "#FFD700"
    }
}

如果需要对所有主题生效，删除外层的[你的主题名称]包装即可。