Sublime Forum

Highlight class attributes in a different color with VS Dark Color Scheme

#1

Hello,

In VSCode html class attributes have a different color (to other elements).

In ST, they are just the same color as text content:

image
image.png818×323 78.8 KB

(Using Visual Studio Dark Color Scheme). This makes it more difficult to discern the properties.

Maybe there is a better VS Dark Color Scheme available?

I’m using ST3 Latest version.

0 Likes
#2

The easy way:

  1. Install PackageDev
  2. Open the command palette (Cmd+Shift+P / Ctrl+Shift+P)
  3. Type/Select “Edit Current Color Scheme…”
  4. Put a rule for entity.other.attribute-name.class like sample below.

Slightly harder:

  1. Make a new file in Packages/User/ with the same filename as the color scheme you are using.
  2. Put a rule for entity.other.attribute-name.class like sample below.
{
    "rules": [
        {
            "name": "HTML 'class' attribute",
            "scope": "entity.other.attribute-name.class",
            "foreground": "#F00",
            // or any color method from
            // https://www.sublimetext.com/docs/color_schemes.html#colors
        },
}

You can also make a PR on the VS Code scheme to add a rule like that.

0 Likes
#3

If I type in “Edit Current…” there are no results.

image
image.png966×137 31.1 KB

I assume I have installed PackageDev, because if I type in Install Package I see a few results:

image

0 Likes
#4

PackageDev != Package Control

0 Likes
#5

Ok, thanks, now I got to Edit Current Color Scheme.

However, the provided code changes the color of the class tag itself, not the class attributes.
image

e.g. “options-group”. How do I style that?

0 Likes
#6

To style anything, you have to get its scope and define how to style it in the color scheme.
To get the scope at the current cursor position, press ctrl+shift+alt+p.

meta.class-name.html should work (I don’t test it).

1 Like
#7

Thanks, that’s very useful.

0 Likes