语法高亮失效主因是未启用syntax theme，需在themes页手动选择；.vue等文件高亮不全因language插件未启用；精细配色须改styles.less并加!important；深色背景推荐暖灰系（如#282c34）以保障视觉舒适度。

代码配色还是灰扑扑？先确认 syntax theme 是否启用

90% 的“换完主题代码没颜色”问题，根源就在这一步：只改了 UI Theme（比如选了 One Dark UI），却没在同一个设置页里手动选中 Syntax Theme。Atom 的语法高亮和界面外观完全解耦，one-dark-syntax、predawn-syntax、atom-material-syntax 这类包装了也没用，不点选就不会生效。

实操建议：

• 打开设置（Ctrl+, 或 Cmd+, ），进 Themes 标签页
• 在 Syntax Theme 下拉框中选一个——推荐 one-dark-syntax（稳定）、predawn-syntax（更暗更柔和）或 base16-tomorrow-dark-syntax（蓝灰调，对比清晰）
• 选完立刻生效，无需重启；但已打开的旧窗口若未刷新，可右键树视图 → Refresh

.vue/.php/.jsx 文件高亮不全？language 包没到位

语法主题只提供“颜色规则”，真正识别 .vue 里 <script></script> 块是 JS、<style></style> 是 CSS、<template></template> 是 HTML 的，靠的是 language-* 插件。缺一个，对应区域就是纯白文字。

常见排查项：

• 进 Packages → 搜索 language-vue，确保状态是 Enabled（不是只装没启）
• 同理检查 language-php、language-javascript、language-typescript 等
• 右键编辑器底部状态栏显示的语法名（如 Plain Text），点击切换为正确语言，快速验证识别是否正常

想调背景色或改关键词颜色？必须写 styles.less

Atom 没有图形化配色面板。所有精细调整都得靠编辑 ~/.atom/styles.less ——这是唯一不会被主题更新覆盖、且支持 Shadow DOM 选择器的合法入口。

关键写法注意：

• 改代码区背景：atom-text-editor::shadow .editor { background-color: #282C34; }
• 改行号背景：atom-text-editor::shadow .line-numbers { background-color: #21252B; }
• 改关键字颜色（以 JS 为例）：atom-text-editor::shadow .syntax--keyword { color: #8BE9FD !important; }
• 所有自定义都加 !important，否则易被主题默认样式压制
• 改完必须执行 Ctrl+Shift+P → 输入 Window: Reload 才能生效

护眼 ≠ 越暗越好，背景与文字对比度要卡在安全线

纯黑背景（#000000）+ 白字（#FFFFFF）看着酷，但实际会加剧视觉疲劳——人眼在明暗极端对比下需频繁调节瞳孔，睫状肌持续紧张。科学推荐的深色背景是暖灰系，如 #1e1e1e、#252526 或 #282C34，搭配柔白（#ABB2BF）或浅灰（#A0A0A0）文字，对比度控制在 4.5:1～7:1 之间。

容易忽略的细节：

• .cursor-line 和 .selection .region 的背景色必须同步调整，否则光标行会突兀发白，打断阅读流
• 注释颜色别用太淡的灰（如 #5C6370 可，#888 就太虚），否则扫读时直接跳过
• 终端插件（如 term3）不继承语法主题色，需单独设 CSS 变量：--terminal-background、--terminal-foreground