直接修改 ~/.atom/styles.less 中的 atom-text-editor::shadow .syntax--variable 规则，而非主题变量；因 Shadow DOM 隔离，@syntax-color-variable 无效；需确保作用域匹配、保存后重载窗口并用 DevTools 验证。
直接改 ~/.atom/styles.less 里的 .syntax--variable 类，别碰主题变量或语法主题设置——那是最慢、最容易失效的路。
为什么改 @syntax-color-variable 没用
Atom 1.0+ 使用 Shadow DOM 封装编辑器内容，@syntax-color-variable 这类 LESS 变量只在语法主题源码里起作用。你改了 one-dark-syntax 的源文件，下次更新就丢；在 styles.less 里重定义变量也不会透传到 shadow 树内。
- 语法主题的变量不暴露给用户样式表，
@syntax-color-variable: #ff0066;写进去完全被忽略 - 真正生效的是 CSS 规则链：
atom-text-editor::shadow .syntax--variable - 漏掉
::shadow或写错 class 名（比如.variable缺syntax--前缀），样式就压根不匹配
.syntax--variable 的实际作用域范围
不是所有“看起来像变量”的东西都命中这个类。Atom 的语法高亮靠 grammar 输出的作用域链，.syntax--variable 通常只覆盖：
- JavaScript/TypeScript 中的
const foo = 1里的foo - Python 中的
bar = "x"左侧标识符 - CSS 中的自定义属性名（
--main-color）
但以下情况 不会 匹配：.syntax--variable
- 函数参数名（常属
.syntax--parameter） - 对象属性键（如
{ key: val }中的key，多为.syntax--property） - JSX 属性名（如
<div className="">中的className，属.syntax--attribute）
正确写法与必须做的三件事
打开 ~/.atom/styles.less，追加这段（以深色背景为例）：
atom-text-editor::shadow .syntax--variable {
color: #e5c17c !important;
font-weight: 500;
}
改完必须同步完成这三步，缺一不可：
- 保存文件（
Ctrl+S/Cmd+S） - 手动重载窗口：
Ctrl+Shift+P→ 输入Window: Reload→ 回车 - 验证是否命中：
Ctrl+Alt+Shift+P打开 DevTools，用元素选择器悬停变量名，看右侧 Styles 面板中最终生效的规则是不是你写的那条
容易被忽略的冲突点
变量名颜色被覆盖，往往不是因为你写错了，而是其他规则优先级更高或语义更具体：
- 某些语言 grammar（如 Tree-sitter）会输出更细的作用域，例如
.syntax--variable .syntax--other .syntax--readwrite，它比单纯.syntax--variable更精确，也更高权 —— 你需要写成atom-text-editor::shadow .syntax--variable .syntax--other才能覆盖 - 如果同时启用了
pigments插件，它会给变量加 background marker，和你的文字色叠加后可能发灰 —— 建议进 pigments 设置把Marker Type改成dot - 中文变量名有时渲染发虚，是因为默认加了
font-style: italic；补上font-style: normal;即可
真正难调的从来不是颜色值，而是确认作用域链是否真走到你写的那条规则上 —— 光看右下角显示 “JavaScript” 不代表 grammar 正确输出了 syntax--variable。
