VSCode中颜色色块显示与否取决于内置设置editor.colorDecorators，而非插件；该设置是总开关，关闭后所有插件均无法渲染色块，且需在远程端启用、避免被工作区配置覆盖。
VSCode 里插件本身不决定颜色是否显示，真正起作用的是编辑器内置的 editor.colorDecorators 设置——关掉它，再装十个颜色插件也看不到色块。
为什么 #ff6b6b 旁边没色块？先查 editor.colorDecorators
这是所有颜色装饰（包括 Color Highlight、Colorize 渲染的色块）的总开关。插件只负责识别颜色值，不控制渲染逻辑。
- 打开设置（
Cmd + ,或Ctrl + ,），搜索colorDecorators，确认Editor > Color Decorators已勾选（对应 JSON 是"editor.colorDecorators": true） - 检查工作区设置：
.vscode/settings.json里有没有"editor.colorDecorators": false——它会覆盖全局设置 - 用远程开发（SSH/Containers）时，该设置必须在远程端生效，本地设了无效
Color Highlight 只认 #fff 和 red，不认 rgb()、hsl()、var(--color)
这不是 bug，是设计限制：插件默认只识别字面量颜色（十六进制、预定义色名）。函数式写法和 CSS 变量无法静态解析。
-
rgb(255, 0, 0)和hsl(0, 100%, 50%)需手动开启语言扩展规则，并添加到colorHighlight.customColors - 更简单的方式是换用
Colorize插件（原生支持函数式） -
var(--primary)类 CSS 变量永远无法被静态分析，任何插件都做不到实时映射 - JS/TS 字符串里的颜色（如
style.backgroundColor = "#00ff00"）默认不扫描，需在colorHighlight.languages中显式加入"javascript"或"typescript"，但要注意误标干扰（比如日志字符串）
色块太浅/太重？调 colorHighlight.defaultAlpha 或 colorHighlight.customColors
插件默认用半透明叠加（如 rgba(0, 255, 0, 0.2)），在浅色主题下易被淹没，在深色主题下可能过重。
- 在
settings.json中添加："colorHighlight.defaultAlpha": 0.4调整体透明度 - 若要为特定格式单独控制，用
colorHighlight.customColors配置数组，例如：{"pattern": "#[0-9a-fA-F]{3,6}", "color": "rgba(0, 0, 0, 0.1)"} - 边框可启用：
"colorHighlight.border": true，提升浅色背景下的辨识度
真正影响长时间开发舒适度的，不是插件装得多不多，而是主题背景与色块透明度的协同——深色主题配低 alpha 值（0.2–0.3），浅色主题配稍高 alpha（0.35–0.45）并加边框，才能既看清又不刺眼。别忽略 workbench.colorCustomizations 对注释、字符串等基础 token 的微调，这才是护眼的关键层。
