VSCode颜色选择器重复显示两次同一颜色预览是什么原因？

问题基础信息 #

• 异常表现：触发颜色选择器时，同一颜色值的预览色块重复显示两次
• 运行环境：
  • VSCode 版本：1.67.2，版本提交哈希：c3511e6c69bb39013c4a4b7b9566ec1ca73fc4d5
  • 程序架构：x64
  • 操作系统：Manjaro Linux x86_64
  • 故障截图：

核心成因 #

该问题是VSCode 1.67版本Linux平台下的高发问题，常见触发原因有三类：

1. 颜色装饰器逻辑冲突
   VSCode从1.60+版本开始内置了样式文件（CSS/LESS/SCSS等）的颜色装饰器（即行内颜色预览块），如果同时安装了第三方颜色预览类插件（比如Color Highlight、各类前端语法增强插件自带的颜色识别功能），两套独立的颜色识别逻辑会同时对同一个颜色值渲染预览块，直接导致重复显示。
2. 分数缩放触发Electron渲染bug
   Manjaro使用GNOME/KDE桌面环境开启分数缩放（125%/150%/175%这类非100%整数倍缩放）时，VSCode 1.67内置的Electron版本存在渲染层bug，会将单个颜色预览元素重复绘制两次，这个bug在1.69正式版中已经被官方修复。
3. 多根工作区配置重复加载
   如果当前打开的是多根目录工作区，且不同根目录下的.vscode/settings.json都配置了开启颜色装饰器的规则，会触发配置重复加载，导致同一位置的装饰器被渲染两次。

排查解决步骤 #

• 优先排查插件冲突：终端执行code --disable-extensions启动无插件模式的VSCode，打开对应文件查看颜色预览是否恢复正常。如果正常，逐个禁用颜色类、前端语法增强类插件，只保留一套颜色预览逻辑即可。
• 修复渲染bug：如果确认是缩放触发的问题，要么给VSCode启动参数加上--disable-gpu临时禁用硬件加速规避，要么直接升级VSCode到1.70及以上稳定版彻底解决。
• 校验工作区配置：打开设置搜索editor.colorDecorators，确认工作区配置没有重复声明该字段，清理冗余配置后重载窗口即可。

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