atom配色定制必须手动编辑~/.atom/styles.less；ui theme和syntax theme分离，需分别配置且用syntax--前缀选择器+!important覆盖，默认不自动重载需手动保存并window: reload验证。
Atom 没有“导入配色方案文件”或“一键应用主题包”的图形化入口，所有真正生效的配色定制，都必须通过编辑 ~/.atom/styles.less 实现；UI Theme 和 Syntax Theme 只是基础载体，不手动覆盖就无法解决颜色冲突、对比度崩坏、终端不同步等实际问题。
为什么装了 syntax theme 还是灰扑扑？
因为 Atom 把界面和代码配色彻底拆开：UI Theme 控制侧边栏、标签页、状态栏，Syntax Theme 才管 .syntax--keyword、.syntax--string 这些类的颜色。常见失效场景包括：
- 在 Settings → Themes 里只装了
atom-material-syntax，但没在右侧Syntax Theme下拉框中手动选中它 - 误装了
atom-material-ui（带-ui后缀），它对代码区零影响 - 文件右下角显示
Plain text或text.html.vue，而不是source.vue——说明 language 插件没生效或 scope 不匹配
怎么精准改函数名、字符串、注释的颜色？
打开 Atom → Ctrl+Shift+P → 输入 Application: Open Your Stylesheet 回车，编辑 ~/.atom/styles.less。写法必须满足三个硬条件：
- 选择器带
syntax--前缀：.syntax--function、.syntax--string、.syntax--comment - 必须用
!important覆盖语法主题默认规则，例如：.syntax--comment { color: #5c6370 !important; } - 若限定语言（比如只改 JS 的函数色），得套作用域：
.syntax--source.syntax--js .syntax--function { color: #61AEEF !important; }
注意：.syntax--source.syntax--vue 和 .syntax--source.syntax--scss 是不同 scope，<style lang="scss"></style> 块需单独写。
改完颜色没反应？漏了这三个动作
Atom 不自动重载用户样式，少做一步就白改：
- 保存
~/.atom/styles.less（Ctrl+S/Cmd+S） - 手动重载窗口：
Ctrl+Shift+P→ 输入Window: Reload→ 回车 - 验证是否命中：
Ctrl+Alt+Shift+P→ 打开 Dev Tools → 用元素选择器悬停目标文本，看右侧Styles面板里最终生效的规则是不是你写的那条
背景色调深了但注释看不清？
不是颜色错了，是对比度崩了——顺手补上：
.syntax--comment { color: #6a9955 !important; }-
atom-text-editor::shadow .cursor { border-color: #528bff !important; }（防光标消失） - 别只调背景，还得同步覆盖
.syntax--string、.syntax--keyword等关键类，否则新背景和旧语法色打架
最常被忽略的是：所有自定义都该写进 styles.less，而不是去动 packages/xxx/styles/ 下的主题源码——后者一升级就全丢，且 Atom ≥ 1.60 后 Shadow DOM 要求必须用 atom-text-editor::shadow 包裹才能生效。
