Atom代码高亮需手动修改styles.less并加!important才能生效；UI Theme只影响界面，Syntax Theme才控制代码颜色；必须用.syntax--前缀选择器、指定正确scope、重载窗口且验证生效规则。
Atom 的代码高亮颜色不能靠“换主题”一键搞定，必须手动改 styles.less 并加 !important 才能生效；只装语法主题包、不选中它，或只改 UI Theme，代码颜色完全不会变。
为什么改了 Syntax Theme 还是灰扑扑？
因为 Atom 把界面和代码配色彻底分开：UI Theme 控侧边栏、标签页，Syntax Theme 才管 .syntax--string、.syntax--keyword 这些类的颜色。常见失效场景：
- 在 Settings → Themes 里只装了
atom-material-syntax，但没在右侧Syntax Theme下拉框中手动选中它 - 误装了
atom-material-ui（带-ui后缀），它对代码区零影响 - 文件右下角显示
Plain text或text.html.vue，而不是source.vue—— 说明 language 插件没生效或 scope 不匹配
怎么精准改函数名、字符串、注释的颜色？
打开 Atom → 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"> 块需单独写。
改完颜色没反应？漏了这三个动作
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; } 防光标消失。
scope 名怎么查？别猜，用命令确认
写错 scope 是最隐蔽的坑，.syntax--source.syntax--js 写成 .syntax--js 就全无效。正确做法：
- 把光标放在代码里任意位置（比如一个
console.log()） - Ctrl+Shift+P → 输入并执行
Editor: Log Cursor Scope - 看输出第一行，如
source.js或source.vue，这就是你要用的 scope 名 - 新建未保存文件默认是
text.plain，必须先保存为.js或手动点状态栏切换语法
Vue 单文件组件里 <script> 和 <style> 是不同 grammar，scope 分别是 source.vue 和 source.css 或 source.scss，别混用。
