直接修改 ~/.atom/styles.less 是唯一可靠方式，需用 atom-text-editor::shadow 和 syntax-- 前缀加 !important 写规则，并保存后手动 window: reload 才生效。
直接改 styles.less 是唯一可靠方式
Atom 1.0+ 启用 Shadow DOM 后，所有语法类名都带 syntax-- 前缀，且必须通过 atom-text-editor::shadow 进入影子树才能命中。改 UI Theme、换 Syntax Theme 源码、或在 DevTools 里临时调样式，全都不持久。
正确路径只有一条：Ctrl+Shift+P → 输入 Open Your Stylesheet → 打开 ~/.atom/styles.less，写规则，保存，再 Window: Reload。
常见错误包括：
- 写
.comment { color: #999; }—— 缺atom-text-editor::shadow和syntax--前缀，完全不生效 - 写
atom-text-editor .syntax--string—— 少了::shadow，选择器无法穿透影子边界 - 改完没按
Ctrl+Shift+P→Window: Reload，以为代码写错了
styles.less 里怎么写语法颜色规则才有效
必须用完整作用域链 + !important，否则会被 Syntax Theme 的 LESS 变量覆盖。例如想把 JavaScript 字符串统一成青绿色：
atom-text-editor::shadow .syntax--string {
color: #98c379 !important;
}
其他常用目标：
- 注释变灰：
atom-text-editor::shadow .syntax--comment { color: #5c6370 !important; } - 关键字加粗：
atom-text-editor::shadow .syntax--keyword { font-weight: bold !important; } - 中文注释发虚？加
font-style: normal !important;关掉斜体 - 光标消失？补上
atom-text-editor::shadow .cursor { border-color: #528bff !important; }
背景色一换，注释/字符串就看不清？这是对比度崩坏
语法主题的颜色变量（如 @syntax-text-color）是按它预设的背景亮度设计的。你把 .editor 背景改成 #1a1a1a，但没同步调亮 .syntax--comment，就会导致低对比。
别只改背景，顺手覆盖关键语法类：
atom-text-editor::shadow {
.editor { background-color: #252525; }
.line-numbers { background-color: #1e1e1e; color: #888; }
}
atom-text-editor::shadow .syntax--comment { color: #6a9955 !important; }
atom-text-editor::shadow .syntax--string { color: #98c379 !important; }
验证是否生效：Ctrl+Alt+Shift+P → Window: Toggle Dev Tools → 用元素选择器悬停代码，看右侧 Styles 面板里最终生效的选择器是不是你写的那条。
为什么改了颜色却没反应？三个动作缺一不可
Atom 不会自动重载用户样式，漏掉任一环节都会让你白忙活：
- 保存
~/.atom/styles.less（Ctrl+S/Cmd+S） - 手动重载窗口：
Ctrl+Shift+P→ 输入Window: Reload→ 回车 - 确认当前文件被正确识别为对应语言：右下角状态栏应显示
PHP、JavaScript等，不是Plain Text；若不对，右键状态栏 →Grammar Selector: Show手动切换
真正容易被忽略的是：Syntax Theme 和 language-* 插件必须协同工作。比如 PHP 颜色异常，大概率不是主题问题，而是 language-php 没启用，或文件后缀没被 fileTypes 正确映射。
