2021年Atom编辑器如何修改现有主题？旧Shadow DOM方案已失效

1. 自定义样式的修改位置 #

Atom 官方移除 Shadow DOM 后，不需要修改主题源文件，直接编辑全局自定义样式表即可：

• 打开方式：Windows/Linux 系统点击菜单栏「编辑 > 样式表」，macOS 系统点击菜单栏「Atom > 样式表」，打开的styles.less文件就是全局自定义样式的配置文件
• 所有自定义的样式规则直接写入该文件，保存后立即生效，优先级高于主题默认样式

2. 目标元素选择器查询方法 #

使用 Atom 自带的开发者工具即可快速定位对应语法的选择器：

1. 按下快捷键Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（macOS）调起开发者工具
2. 点击开发者工具左上角的元素拾取箭头，点击编辑器中你需要修改样式的代码片段（比如HTML的id属性、PHP的public关键字）
3. 在右侧 Elements 面板的元素层级中，即可看到该代码片段对应的所有语法类选择器，均以.syntax--开头

两种常见场景参考配置 #

可以直接把以下规则写入你的styles.less文件，颜色值可以根据你自己的需求调整：

// 区分HTML的id属性和class属性颜色
.syntax--attribute.syntax--id {
  color: #ff6b6b !important;
}
.syntax--attribute.syntax--class {
  color: #4ecdc4 !important;
}

// 修改PHP public/private等修饰符颜色为紫色，和变量色统一
.syntax--storage.syntax--modifier.syntax--php {
  color: #bb86fc !important;
}

注：规则末尾加!important是为了避免被主题原有样式覆盖，若自定义样式已生效可以去掉。

内容的提问来源于stack exchange，提问作者Yaro-Maro