Less中设置颜色变量需使用@变量名: 值;语法，如@primary-color: #428bca;，并在样式规则中引用该变量，编译后自动替换为对应值，提升可维护性。
标签页颜色怎么按文件类型变色
直接改 .tab 的背景色会全局生效，没法区分 .js 和 .vue；真正起作用的是 filetype-color 插件提供的类名，它会给每个标签加上类似 .file-type-js 或 .file-type-vue 的 class。
- 装插件：
apm install filetype-color或 Settings → Install 搜filetype-color安装 - 装完不用重启，但得确保当前打开的文件已识别出语法 scope（比如 .vue 文件要先装
language-vue，否则 scope 是text.plain，插件就加不上.file-type-vue） - 插件默认只给部分扩展名上色，想支持自定义后缀（比如
.config.js），得在 Settings → Packages →filetype-color→ Settings 里填config.js: js这样的映射
styles.less 里怎么写才能让 .py 标签变蓝、.md 变绿
插件加上的 class 是 .file-type-py 和 .file-type-md，不是 .py-tab 或其他臆测名。必须用这些确切类名写样式，且要限定在 .tab 内部，否则可能影响树视图或其他区域。
- 正确写法：
atom-workspace .tab.file-type-py { background-color: #4285f4 !important; } - 别漏
!important—— Atom 默认样式优先级高，不加就无效 - 如果用了深色 UI 主题（如
one-dark-ui），.tab原本有渐变背景，单设background-color会覆盖不干净，建议同时清掉background-image：atom-workspace .tab.file-type-py { background-image: none !important; background-color: #4285f4 !important; }
为什么改了 styles.less，.vue 标签颜色还是没变
大概率是 scope 没对上：插件依赖文件实际使用的语法 scope 来决定加哪个 .file-type-xxx 类，而 .vue 文件若没装 language-vue 或没重启，Atom 会把它当 text.html 处理，结果加的是 .file-type-html，不是 .file-type-vue。
- 验证方法：打开一个 .vue 文件，按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（macOS），输入Editor: Log Cursor Scope回车，看第一行是不是source.vue - 不是
source.vue？说明 language 插件没生效，重装language-vue并重启 Atom - 即使 scope 正确，
filetype-color默认也不处理source.vue，得去它的 Settings 里手动加映射：vue: vue
图标和标签颜色怎么协同显示
filetype-color 只管标签背景，图标由 file-icons 控制；两者类名体系不同，不能混用。比如你想让 .ts 文件标签蓝底 + TypeScript 图标，得分别配置：
- 标签色：
atom-workspace .tab.file-type-ts { background-color: #007acc !important; } - 图标色：在
styles.less里加.file-icon[data-name$=".ts"]:before { color: #007acc !important; }（file-icons用data-name属性匹配） - 注意：图标颜色受字体渲染影响，某些深色背景上可能发虚，可加
font-weight: bold;强化显示
scope 链越长，选择器越脆弱；filetype-color 加的类名简单直接，比靠 .syntax--source.syntax--ts 去套标签更可靠。但前提是语言包真把文件认对了——这一步卡住，后面全白搭。
