vscode 不支持多个 ui 主题共存，因主题通过覆盖同一 css 注入点导致样式冲突、界面错位；必须禁用除主主题外所有 ui 主题插件，并清理 settings.json 中残留配置及图标/终端等间接干扰项。

VSCode 同时启用多个主题插件（比如 vscode-dark-islands 和另一个自定义 UI 主题）时，界面元素错位、标签栏变形、侧边栏颜色异常或按钮点击无响应——这不是 VSCode 坏了，而是主题之间互相覆盖 CSS 注入点，最终只有一个能生效，其余被静默丢弃。

为什么两个主题不能共存

VSCode 的主题系统不支持“叠加”或“混合”。每个主题插件通过 productIconTheme、workbench.colorCustomizations 或直接注入 custom-ui-style.stylesheet 来修改 UI。当多个插件尝试写入同一类样式规则（例如 tabs-container 的 background-image），后加载的主题会覆盖前一个，且不会报错，只留下视觉混乱。

• vscode-dark-islands 依赖 Custom UI Style 扩展来注入容器级样式；若你同时装了 One Dark Pro 或 Atom One Dark Theme，它们也会尝试接管 activityBar 或 statusBar 的颜色，但不走同一套注入机制，结果就是部分区域按 A 主题渲染、部分按 B 主题渲染
• 某些主题（如老版本 Dracula Official）会强制重写 workbench.colorCustomizations 全局配置，覆盖你手动在 settings.json 中写的定制项
• VSCode 不会在 UI 上提示“主题冲突”，只会在 Developer Tools 控制台里悄悄打印 Style override ignored for .monaco-workbench 类警告

如何确认是主题插件在打架

打开命令面板（Ctrl+Shift+P），运行 Developer: Toggle Developer Tools，切换到 Console 标签页，然后刷新窗口（Ctrl+R）。重点关注以下几类输出：

• 出现多次 Overriding style for .tab 或 Ignoring duplicate theme contribution
• 有 Failed to load stylesheet 且路径指向某个主题插件的 css 文件
• 搜索 custom-ui-style，发现它被加载了两次，但第二次的 stylesheet 配置为空或结构错误

再运行 Developer: Show Running Extensions，看是否同时列出了 vscode-dark-islands 和另一个 UI 主题（如 Custom CSS and JS Loader 或 Material Theme）——只要两者状态都是 Activated，基本就能锁定。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

必须停掉其中一个主题插件

别试图“调和”两个主题。VSCode 没有主题合并机制，强行保留会导致不可预测的渲染行为。正确做法是明确主次：

• 如果你想要 vscode-dark-islands 的岛屿风 UI，就禁用所有其他主题类插件，包括 Custom CSS and JS Loader、Material Icon Theme（图标主题可留，但 UI 主题必须只留一个）
• 确保 Custom UI Style 是唯一启用的 UI 增强插件，并按官方要求配置 custom-ui-style.stylesheet ——尤其注意 tabs-container 和 tab 的 !important 声明不能被其他插件的 CSS 规则覆盖
• 检查 settings.json 中是否残留了其他主题的配置项，比如 "workbench.colorTheme": "One Dark Pro" 或 "material-theme.accent"，这些会干扰 vscode-dark-islands 的初始化
• 重启 VSCode 后，右下角语言模式旁的「主题」按钮应只显示 Dark Islands，而不是多个选项可选

容易被忽略的细节：图标主题和文件关联也会影响 UI

你以为只关 UI 主题就够了？不是。图标主题（如 vscode-icons）和文件语言关联（files.associations）也会间接触发样式重绘逻辑：

• vscode-icons 如果启用了 folders.colorize，它会往 explorer 区域注入额外 class，可能和 vscode-dark-islands 的 sidebar 样式冲突，导致折叠箭头消失
• 在 settings.json 中写了 "files.associations": { "*.vue": "vue" }，但没装 Volar，VSCode 就会 fallback 到基础语法高亮，此时主题对 .vue 文件的 colorCustomizations 可能完全不生效
• 某些主题（如 GitHub Theme）会监听 workbench.action.terminal.toggleTerminal 并重绘终端背景，而 vscode-dark-islands 默认不处理终端样式，结果就是终端黑一块、灰一块

所以，哪怕你只留一个 UI 主题，也要顺手检查图标插件是否开启「高级着色」、终端是否被其他插件劫持、以及 workbench.colorCustomizations 里有没有手写的冲突规则——这些地方藏得深，但改错一行就足以让整个侧边栏跑偏。