如何为VSCode活动栏选中项设置渐变边框颜色？

前置准备 #

• 安装 Custom CSS and JS Loader 插件（VSCode默认不支持自定义CSS，需通过该插件加载自定义样式）

自定义样式代码 #

创建一个CSS文件（例如custom-activitybar-styles.css），粘贴以下代码：

:root{
  --size: 5px;
  --border-width: 2px;
}

/* 为活动栏选中项容器设置相对定位，作为伪元素的参照 */
.monaco-workbench .part.activitybar>.content .monaco-action-bar .action-item.active {
  position: relative;
}

/* 左上角渐变角 */
.monaco-workbench .part.activitybar>.content .monaco-action-bar .action-item.active::before {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 0;
  left: 0;
  border-top: var(--border-width) solid;
  border-left: var(--border-width) solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(-45deg, #4dd78a, #20e3b2);
}

/* 右上角渐变角 */
.monaco-workbench .part.activitybar>.content .monaco-action-bar .action-item.active::after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  top: 0;
  right: 0;
  border-top: var(--border-width) solid;
  border-right: var(--border-width) solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(45deg, #098dff, #2cccff);
}

/* 左下角渐变角 */
.monaco-workbench .part.activitybar>.content .monaco-action-bar .action-item.active .action-label::before {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: var(--border-width) solid;
  border-left: var(--border-width) solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(45deg, #fc6c8f, #ffb86c);
}

/* 右下角渐变角 */
.monaco-workbench .part.activitybar>.content .monaco-action-bar .action-item.active .action-label::after {
  content: "";
  width: var(--size);
  height: var(--size);
  position: absolute;
  bottom: 0;
  right: 0;
  border-bottom: var(--border-width) solid;
  border-right: var(--border-width) solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(-45deg, #6a5af9, #d66efd);
}

生效步骤 #

1. 打开VSCode的settings.json（快捷键Ctrl+,后点击右上角图标）
2. 添加配置：

   "vscode_custom_css.imports": [
     "file:///你的CSS文件绝对路径"
   ]
   

3. 重启VSCode，执行命令面板（Ctrl+Shift+P）中的Reload Custom CSS and JS即可生效

说明 #

• 配色完全沿用你提供的编辑器标签渐变方案，保证和Evondev - Dracula主题风格统一
• 通过活动栏选中项的专属DOM选择器替换了原标签的选择器，精准定位目标元素

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