colorhelper仅实时预览光标下的合法颜色值并支持调色面板,不管理颜色变量;需启用enable_color_variables、同文件作用域、标准颜色格式,且依赖正确语法识别与无冲突快捷键。

ColorHelper 不是颜色变量管理插件,它不提取、不导出、不生成调色板,也不管理 CSS 变量的定义与依赖关系——它只做一件事:在光标停在合法颜色值上时,实时显示预览色块,并支持点击呼出调色面板。所谓“颜色变量管理”是常见误解。
为什么 var(--primary) 有时预览不出来?
不是插件不支持,而是它对上下文有严格要求:
-
enable_color_variables必须设为true(在Preferences → Package Settings → ColorHelper → Settings - User中) - 变量定义(如
--primary: #3b82f6;)和使用(如color: var(--primary);)必须在同一语法作用域内 —— 比如都在同一个.css文件里;跨文件引用(如vars.css定义、main.css使用)不会解析 - 变量值本身必须是可识别的颜色格式:
--primary: hsl(210, 75%, 50%)可以,--primary: var(--secondary)或--primary: unset不会触发预览 -
env()、Sass变量($color)、Less变量(@color)完全不支持
ColorHelper 预览不显示?先看右下角状态栏
90% 的“没反应”问题,根源是 Sublime 没把当前文件当“颜色上下文”处理:
- 右下角显示
Plain text→ 插件彻底静默;必须右键 →Set Syntax→ 明确选CSS、SCSS、source.css.postcss(Vue 单文件组件中<style></style>块必需用这个,不能只选source.css) -
HTML文件中,只有光标落在style="..."属性值内部且语法被识别为CSS时才生效;<div style="color: #ff0000"> 里光标停在 <code>#ff0000上,但状态栏是HTML,就不触发 -
JavaScript中模板字符串或对象字面量里的颜色(如el.style.color = "#3498db")默认不分析;ColorHelper不扫描字符串内容,这是设计使然,不是 bug - 用户快捷键文件路径:
C:\Users\XXX\AppData\Roaming\Sublime Text\Packages\User\Default (Windows).sublime-keymap(Win)~/Library/Application Support/Sublime Text/Packages/User/Default (OSX).sublime-keymap(macOS) - 用 Sublime 打开该文件,搜索
alt+shift+c或ctrl+shift+c,删掉冲突项,或改写为alt+ctrl+shift+c - 保存后立即生效,无需重启;顺手装个
FindKeyConflicts插件,以后一键扫全量冲突 - 注意:
Ctrl+Shift+C是旧版ColorPicker的键位,ColorHelper默认不用它 —— 别按错
快捷键 Alt+Shift+C 按了没反应?别重装,查冲突
这个组合键极易被覆盖,尤其在 Windows 上常被微信、QQ、录屏工具劫持:
真正难的不是装插件,而是理解它不做什么:它不从图片取色,不扫描项目找所有颜色,不管理变量作用域链,也不替代设计系统文档。你得自己保证变量定义清晰、语法设置准确、快捷键干净——这些细节漏掉一个,ColorHelper 就只是个安静的插件。











