Atom代码高亮需区分UI Theme与Syntax Theme，仅装Syntax Theme不生效须手动选择；精准改色须在styles.less中用.syntax--前缀选择器+!important，并按scope限定语言，改后需保存、重载窗口并用Dev Tools验证。
Atom 的代码高亮不能靠“换主题”一键生效，必须明确区分 UI Theme 和 Syntax Theme，并手动配置 styles.less 才能真正控制函数、字符串、注释等元素的颜色。
为什么换了 Syntax Theme 还是灰扑扑？
因为 Atom 把界面和代码配色彻底拆开：UI Theme 只影响侧边栏、标签页、按钮；Syntax Theme 才管 .syntax--function、.syntax--string 这些类的颜色。常见失效场景包括：
- 在 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 面板里最终生效的规则是不是你写的那条
scope 名怎么查？别猜，用命令确认
写错 scope 是最隐蔽的坑，.syntax--source.syntax--js 写成 .syntax--js 就全无效。正确做法：
- 把光标放在代码里任意位置（比如一个
console.log()） -
Ctrl+Shift+P→ 输入并执行Editor: Log Cursor Scope - 看输出第一行，例如
source.js或source.vue—— 这才是你要用的 scope 名
背景调深后注释看不清、光标消失，不是颜色错了，是对比度崩了；顺手补上 .syntax--comment { color: #6a9955 !important; } 和 atom-text-editor::shadow .cursor { border-color: #528bff !important; } 才算闭环。
