最可靠的方法是直接修改 ~/.atom/styles.less 文件，需用 atom-text-editor::shadow 包裹选择器以适配 Shadow DOM，并分别设置 .editor 和 .line-numbers 背景色，同时覆盖语法高亮类避免对比度问题。
直接改 .atom/styles.less 最可靠
Atom 不像 VS Code 那样提供图形化“背景色”滑块，所有编辑器区域（包括代码区、行号、括号匹配高亮背景）的颜色，最终都得靠修改 styles.less 文件实现。这不是 hack，而是 Atom 官方支持的定制方式。
常见错误是只改了 atom-workspace 或 atom-text-editor 的 background-color，结果发现行号栏还是黑的、选中背景没变、甚至光标周围发灰——因为 Atom 把不同区域拆成了独立选择器。
- 打开命令面板：
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入 “Application: Open Your Stylesheet”，回车 - 文件路径是
~/.atom/styles.less，首次打开会是空文件，直接写即可 - 别漏掉
atom-text-editor::shadow这层封装，否则语法高亮区域的背景不会生效
改代码编辑区背景必须用 ::shadow 包裹
Atom 1.0+ 使用 Shadow DOM 隔离编辑器渲染层，直接写 .editor { background: #2d2d2d; } 是无效的。必须通过 atom-text-editor::shadow 进入影子树才能控制内部元素。
比如你想让整个代码编辑区（不含边栏、状态栏）变成深灰背景，同时保持行号可读：
atom-text-editor::shadow {
.editor {
background-color: #252525;
}
.line-numbers {
background-color: #1e1e1e;
color: #888;
}
}
注意：.editor 控制的是文本内容区域（含空行、折叠指示符等），.line-numbers 是左侧行号栏——两者背景常需分别设置，否则容易糊成一片。
别只调背景色，顺手检查对比度和语法高亮冲突
把背景改成 #1a1a1a 后发现注释看不清、字符串泛绿、甚至光标消失？不是 Atom 坏了，是你的新背景和当前语法主题（Syntax Theme）的颜色变量打架了。
原因在于：语法高亮颜色（如 .comment、.string）由所选语法主题（如 One Dark Syntax）定义，它们默认适配的是该主题预设的背景亮度。你手动改了背景，但没同步调整文字色，就会出现低对比问题。
- 先确认当前语法主题：Settings → Themes → Syntax Theme（例如
one-dark-syntax） - 若想彻底统一，建议在
styles.less中覆盖关键语法类，例如：.comment { color: #6a9955 !important; } - 用浏览器开发者工具（
Ctrl+Alt+Shift+P→ “Window: Toggle Dev Tools”）悬停查看实际生效的选择器，避免写错层级
想加背景图？插件比手写 CSS 更稳
纯色背景用 styles.less 足够，但加图片背景（比如极客风电路板/渐变纹理）容易翻车：图片拉伸错位、遮挡光标、拖慢滚动、甚至导致 Atom 启动卡死。
官方不推荐直接用 background-image 写死在 atom-text-editor::shadow 里，因为编辑器区域会频繁重绘，CSS 背景图性能不可控。
- 推荐用社区验证过的插件：
background-tips或atom-background（后者更轻量） - 安装后按
Ctrl+Shift+E（Windows/Linux）或Cmd+Shift+E（macOS）呼出配置面板，支持透明度、平铺模式、模糊强度等实用参数 - 切记关闭「Apply to tree-view」选项，否则侧边项目栏也会叠图，干扰文件识别
真正麻烦的从来不是改颜色，而是改完之后发现括号匹配背景太亮、折叠箭头看不清、或者某天更新 Atom 后 ::shadow 被弃用——所以每次大版本升级后，记得快速进 Dev Tools 看一眼选择器是否还活着。
