atom主题必须分开配置ui theme和syntax theme，二者缺一不可；ui theme控制界面元素，syntax theme决定代码颜色；定制应优先编辑~/.atom/styles.less并加!important。
Atom 的主题不是“装一个就全变”，UI 和语法样式必须分开配，漏掉任一环节都会导致界面只改了一半——比如菜单栏变暗了，代码区还是白底黑字。
UI Theme 和 Syntax Theme 必须分别启用
Atom 把界面外壳（按钮、标签页、树视图）和代码区域（关键字、字符串、注释）拆成两套独立系统。Settings > Themes 页面有两个并列下拉框：UI Theme 控制左侧边栏、顶部菜单、标签页背景；Syntax Theme 控制编辑区内的所有颜色。
- 常见错误现象：装了
atom-material-ui，但代码还是默认黑底白字 → 只启用了 UI Theme，没在右侧下拉框里选atom-material-syntax - 最稳的组合是：
One Dark UI+one-dark-syntax，或Atom Light UI+one-light-syntax；混搭可能造成文字发虚、括号高亮消失 - 第三方主题如
atom-material-ui仅声明"theme": "ui"，它压根不提供语法色，搜atom-material时容易误点成语法主题包
改背景色必须写 atom-text-editor::shadow .editor
直接写 .editor { background-color: #252525; } 完全无效——Atom 1.0+ 强制使用 Shadow DOM 封装编辑器内容，所有内部样式必须加 ::shadow 才能穿透。
- 正确写法：
atom-text-editor::shadow .editor { background-color: #252525 !important; } -
!important不可省：否则会被当前Syntax Theme的默认变量（如@syntax-background-color）覆盖 - 别只改
.editor：同步补上.line-numbers { background-color: #1e1e1e; }，否则行号栏和代码区颜色断层
自定义优先走 ~/.atom/styles.less，别碰主题源码
编辑 ~/.atom/styles.less 是唯一安全、持久、不被覆盖的定制方式。它在 Atom 启动时最后加载，优先级高于所有已安装主题。
- 快捷打开：
Ctrl + Shift + P→ 输入Open Your Stylesheet回车 - 改侧边栏字体大小：
.tree-view { font-size: 14px; } - 调亮注释颜色（深色背景下易看不清）：
atom-text-editor::shadow .syntax--comment { color: #88a06f !important; } - 光标变透明？补一行：
atom-text-editor::shadow .cursor { border-color: #528bff !important; }
装完主题不显示？先查三件事
不是 Atom 坏了，大概率是安装路径、包类型或兼容性问题。
- 必须走 Settings > Install 搜索安装，别手动解压 ZIP 到
~/.atom/packages/—— 权限或路径错会导致包加载失败 - 检查包名后缀：
atom-material-ui是 UI 主题，atom-material-syntax才是语法主题，二者缺一不可 - 看更新时间：2024 年后仍在维护的主题集中在
Material、One、Hydrogen系列；2018 年的老主题在 Atom v1.60+ 上常出现错位、漏样式甚至树视图全绿
真正麻烦的从来不是“怎么改”，而是改完之后发现注释灰得看不见、光标融进背景、终端颜色和代码块割裂——这些都不是配色错了，是只动了背景，没同步调语法类的颜色变量，或者忘了终端要靠 :root CSS 变量单独绑定。
