Sublime Text 3 - Color Scheme for CSS property

Question

How can I change the color scheme of my CSS properties in Sublime Text 3?

I already modify Monokai.tmTheme and changed the color of default Library variable and 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>

By changing the last <string> inside <dict> you can see here the default white color of variables is changed to pink.

I want to change the default blue color of CSS properties but I can't find its related markup string name.

If you put the cursor on top of one of those properties and select Tools > Developer > Show Scope Name a popup will tell you the scopes that apply to it. — OdatNurd
Thanks a lot @OdatNurd, it works fine. The scope name is support.type, support.class. — pldg
@Keith Thanks for your report. For me its a slightly different question, I'm not an expert coder jet and I find difficult to understand that answer. My question is more specific and I think it's simpler to understand for someone who search only for changing color scheme. — pldg

Keith Hall Keith Hall · Accepted Answer · 2017-08-26T06:05:42

As you have seen, these .tmTheme files are in PList XML format. For color schemes, the <string> after <key>name</key> is really only a comment, and in most cases, the name key could be missing entirely, so it's best to look directly at the <string> after <key>scope</key>.

This string is a scope selector, and I have explained how they work in a separate answer. The important takeaway from that answer is:

In Sublime Text, you can find the scope of the character to the right of the cursor by going to the Tools menu -> Developer -> Show Scope Name.

This will show you the full scope stack, but typically we are only interested in the last scope for color scheme purposes. For example, it is not recommended to color a meta scope directly, but it can be used in conjunction with a non-meta scope for more precise coloring. See the official Scope Naming documentation for more details.

(A syntax definition assigns scopes to the text in your document, the color scheme assigns colors to those scopes using the aforementioned scope selectors.)

So for CSS properties, the full scope might look like source.css meta.property-list.css meta.property-name.css support.type.property-name.css. If you want to update the color only for CSS properties, and not other elements from other syntaxes with the same support.type scope, then you can use support.type.property-name or support.type.property-name.css as the scope selector. Otherwise, you should find that the color scheme already matches support or support.type somewhere and can change the color associated with that.

Just like in CSS, scope selectors also have specificity rules, but this is largely irrelevant for simple single scope selectors. What this means is that, it is best to check if the color scheme already has a match for the scope you want to change the color of - if it does, update that, otherwise you can typically add a new <dict> accordingly towards the end of the file after the other rules.

The minimum content of these dicts are the scope, and a settings sub dictionary, typically with the foreground set. The official color scheme documentation linked earlier in this answer will go into more detail.

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

Sublime Text 3 - Color Scheme for CSS property

1 Answers