Color Highlight插件不显示色块，根本原因是VSCode内置设置editor.colorDecorators被设为false，或JS/TS字符串中颜色未在colorHighlight.languages中配置对应language+pattern，且rgb()/var()等动态颜色不受支持。
Color Highlight插件不显示色块，先查 editor.colorDecorators
插件本身不控制是否渲染色块，真正开关在 VSCode 内置设置里。editor.colorDecorators 默认为 true，但一旦被设成 false（比如你在 workspace 的 .vscode/settings.json 里手动关过），哪怕插件装得再全也完全没反应。
验证方式：打开设置（Cmd+, 或 Ctrl+, ），搜 color decorators，确认 Editor > Color Decorators 已勾选；或者直接检查 settings.json 中是否存在 "editor.colorDecorators": false 并删掉它。
常见误操作：
- 用 Remote-SSH 连远程机器时，改了本地设置却忘了同步到远程工作区
- 某些主题或自定义 CSS 插件会覆盖装饰层，临时切回
Default Dark+主题测试
JS/TS 字符串里的 #ff6b6b 不高亮，得手动加 language + pattern
默认情况下，Color Highlight 只扫描 css、scss、html 等样式类语言，JS/TS 文件中的字符串内容属于“非上下文感知区域”，插件不会主动解析——不是 bug，是设计取舍。
要让它生效，必须在 colorHighlight.languages 中显式添加 javascript 和 typescript，并配能捕获字符串内颜色的正则：
"colorHighlight.languages": [
{"language":"javascript","pattern":"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'"},
{"language":"typescript","pattern":"\"#[0-9a-fA-F]{3,8}\"|'#[0-9a-fA-F]{3,8}'"}
]
注意点：
-
{3,8}覆盖#rgb、#rrggbb、#rrggbbaa三种格式 - 单引号和双引号都要写进 pattern，漏一种就漏一半匹配
- 别把整个
colorHighlight.languages数组写成字符串，JSON 格式必须合法
rgb(255, 0, 0) 和 var(--primary) 始终不渲染？这是正常限制
Color Highlight v2.5.0+ 支持 rgba() 和 #RGBA，但对函数式颜色（rgb()、hsl()）和 CSS 变量（var(--xxx)）仍不支持静态解析——因为它们依赖运行时计算，插件无法推断值。
如果你真需要这类支持，有两个现实选择：
- 换用
Colorize插件（原生支持rgb()/hsl()，但和Color Highlight冲突，需禁用后者） - 对
var(--xxx)，可手动在colorHighlight.customColors里硬编码映射，例如{"--primary": "#3498db"}，但这只适用于固定值且需维护
别指望任何静态插件能实时还原 var(--dark-mode ? #000 : #fff) 这类条件表达式——这超出了语法高亮的范畴。
色块颜色发灰、透明色显示不透明，重点看 alpha 处理和主题干扰
你看到的预览色块偏暗、#ff6b6b80 显示成不透明，大概率不是插件问题，而是 alpha 通道未被正确识别或主题样式覆盖了装饰层。
排查步骤：
- 确认插件版本 ≥ v2.5.0（老版本不解析 8 位 hex）
- 检查
colorHighlight.defaultAlpha设置，它会影响未带 alpha 的颜色默认透明度（比如设成0.8会让所有 #rgb/#rrggbb 略微变淡） - macOS 上用 P3 屏幕时，VSCode 默认色彩配置可能未启用 Display P3 支持，导致预览色域失准
- 极少数主题会通过
workbench.colorCustomizations覆盖editor.selectionBackground或装饰层 z-index，换主题验证
最易忽略的一点：colorHighlight.border 设为 true 后，边框颜色由主题决定，深色主题下可能和背景色太接近而“看不见边框”，实际它存在。
