atom 的代码提示背景色无法通过更换主题解决，必须手动修改 styles.less 文件，因为 autocomplete-plus 补全框是独立浮层，不继承语法或 ui 主题样式，需单独设置 .autocomplete-plus .list-group、.list-item 及 .selected 等选择器，并重载窗口才能生效。
Atom 的代码提示（autocomplete）背景色不能靠换主题解决，必须手动改 styles.less —— 因为补全框（.autocomplete-plus）是独立浮层，既不继承语法主题，也不受 UI 主题默认样式控制。
为什么换 Syntax Theme 或 UI Theme 都不管用
Autocomplete 框的 DOM 结构完全游离于编辑器主内容之外，它由 autocomplete-plus 插件渲染，使用自己的 CSS 类名和层级。即使你用了 one-dark-syntax 和 one-dark-ui，补全框默认仍可能是白底黑字或灰底模糊色——这不是 bug，是设计如此。
- UI Theme 只控制侧边栏、状态栏、树状视图等区域
- Syntax Theme 只作用于
atom-text-editor::shadow内部的代码区 -
.autocomplete-plus浮层在atom-workspace顶层，需单独选中
.autocomplete-plus 样式必须写在 styles.less 里
打开命令面板：Ctrl+Shift+P → 输入 Application: Open Your Stylesheet → 回车，进入 ~/.atom/styles.less 编辑。
- 关键选择器是
.autocomplete-plus .list-group（整个下拉列表容器）和.autocomplete-plus .list-item（每一行候选） - 不要漏掉伪类：
.list-item.selected控制高亮项，.list-item .icon控制左侧图标颜色 - 若想让背景透明/半透，用
background-color: rgba(30, 30, 30, 0.95)，别用transparent，否则会透出底层窗口导致阅读困难
示例（深色系适配）：
/* 补全框整体背景 */
.autocomplete-plus .list-group {
background-color: #1e1e1e;
border: none;
}
<p>/<em> 单行候选 </em>/
.autocomplete-plus .list-item {
color: #c5c8c6;
background-color: #252525;
}</p><p>/<em> 当前高亮项 </em>/
.autocomplete-plus .list-item.selected {
background-color: #3a3a3a !important;
color: #f0f0f0;
}</p><p>/<em> 图标颜色（如函数、变量标识） </em>/
.autocomplete-plus .list-item .icon {
color: #888;
}</p>
容易被忽略的三个细节
改完保存后，补全框样式不会自动更新——必须手动重载窗口：Ctrl+Shift+P → Window: Reload。
- 如果用了
flex-tool-bar或tool-bar类插件，它们的按钮有时会遮挡补全框底部，需加z-index: 9999提升.autocomplete-plus层级 - 某些语法高亮插件（如
language-babel）会注入自定义补全项，其内联样式可能覆盖你的设置，此时得加!important强制生效 - Mac 上启用了“Reduce transparency”系统设置时，
rgba()透明度可能失效，建议直接用纯色 + 足够对比度
最常被跳过的动作是：改完 styles.less 后没重载窗口，就以为没生效；或者只调了 .list-item 背景，却忘了 .selected 状态必须单独设，结果高亮项和普通项看起来一模一样。
