如何修改VS Code中ActivityBar的:active与:hover状态样式？

我之前也遇到过这个困扰！VS Code官方的ActivityBar主题颜色参考文档确实没明确提到怎么配置:hover和:active这些交互状态的样式，不过你通过开发者工具定位到.action-item元素的思路完全正确。

因为官方没有提供直接的主题颜色变量来控制这些状态，我们可以借助自定义CSS的方式来实现，具体步骤如下：

• 先安装「Custom CSS and JS Loader」这个VS Code扩展，它能帮我们加载自定义的样式文件
• 在你的VS Code配置目录（一般是系统用户目录下的.vscode文件夹）里新建一个custom.css文件
• 在custom.css中添加针对.action-item伪类的样式，示例如下：

/* ActivityBar 项目鼠标悬停时的样式 */
.activity-bar .action-item:hover {
  background-color: #3a3d41 !important; /* 替换成你想要的悬停背景色 */
  color: #ffffff !important; /* 可选：修改悬停时的文字/图标颜色 */
}

/* ActivityBar 项目点击激活时的样式 */
.activity-bar .action-item:active {
  background-color: #2d2f31 !important; /* 替换成你想要的激活背景色 */
}

• 打开VS Code的settings.json（可以通过快捷键Ctrl+,打开设置面板，然后点击右上角的「打开设置(JSON)」按钮），添加以下配置指向你的自定义CSS文件：

"vscode_custom_css.imports": [
  "file:///Users/你的用户名/.vscode/custom.css" /* 替换成你实际的文件路径 */
]

• 最后重启VS Code，扩展会弹出提示让你重新加载以应用自定义样式，点击确认就生效了。

⚠️ 注意：每次VS Code版本更新后，可能需要重新启用这个扩展并重新加载样式，因为版本更新会重置相关的自定义配置。

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