Sublime Text 3 - CSS 属性的配色方案

Question

如何在 Sublime Text 3 中更改 CSS 属性的配色方案？

我已经修改了Monokai.tmTheme，并更改了默认Library variable和Variable的颜色。

<dict>
    <key>name</key>
    <string>Library variable</string>
    <key>scope</key>
    <string>support.other.variable</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#FFB6C1</string>
    </dict>
</dict>
<dict>
    <key>name</key>
    <string>Variable</string>
    <key>scope</key>
    <string>variable</string>
    <key>settings</key>
    <dict>
        <key>fontStyle</key>
        <string>italic</string>
        <key>foreground</key>
        <string>#FFB6C1</string>
    </dict>
</dict>

通过更改<dict> 中的最后一个<string>，您可以看到here 变量的默认白色更改为粉红色。

我想更改 CSS 属性的默认蓝色，但找不到其相关的标记字符串名称。

Answer 1

如您所见，这些.tmTheme 文件采用PList XML 格式。对于配色方案，<key>name</key> 之后的<string> 确实只是一个注释，而且在大多数情况下，name 键可能会完全丢失，所以最好直接看<key>scope</key> 之后的<string>。

这个字符串是scope selector, and I have explained how they work in a separate answer。该答案的重要结论是：

在 Sublime Text 中，您可以通过转到工具菜单 -> 开发人员 -> 显示范围名称来找到光标右侧字符的范围。

这将向您展示完整的范围堆栈，但通常我们只对 color scheme 目的的最后一个范围感兴趣。例如，不建议直接为meta 范围着色，但可以与非元范围结合使用以进行更精确的着色。详情请见官方Scope Naming documentation。

（语法定义为文档中的文本分配范围，配色方案使用上述范围选择器为这些范围分配颜色。）

因此，对于 CSS 属性，完整范围可能类似于 source.css meta.property-list.css meta.property-name.css support.type.property-name.css。如果您只想更新 CSS 属性的颜色，而不是具有相同 support.type 范围的其他语法中的其他元素，那么您可以使用 support.type.property-name 或 support.type.property-name.css 作为范围选择器。否则，您应该会发现配色方案已经与某处的support 或support.type 匹配，并且可以更改与之关联的颜色。

就像在 CSS 中一样，scope selectors also have specificity rules，但这与简单的单范围选择器在很大程度上无关。这意味着，最好检查配色方案是否已经与您想要更改颜色的范围匹配 - 如果有，请更新它，否则您通常可以相应地添加新的<dict>在其他规则之后文件的结尾。

这些dicts 的最小内容是范围和settings 子字典，通常带有foreground 集。此答案前面链接的官方配色方案文档将更详细。

<dict>
    <key>scope</key>
    <string>support.type.property-name.css</string>
    <key>settings</key>
    <dict>
        <key>foreground</key>
        <string>#FFB6C1</string>
    </dict>
</dict>