Low contrast placeholders in JS template literals

[rfricz]

Hi, I find the dollar sign and curly braces in JS backtick string templates really hard to see unless I crank up the brightness on my monitor:

It doesn't look that bad when looking at this single instance of it, but in a page full of code and my eyes adjusted to the bright text all around it blends into the dark background and looks like whitespace.

Could you please make that dark blue lighter, or use a different, more contrasting color? Thanks.

[MattDMo]

Thanks for the feedback! I have the brightness set pretty high on the screens I use, but if I lower it I can see where you're coming from.

Open your Packages folder by selecting Preferences → Browse Packages…, go to the Neon Color Scheme folder, and open Neon.sublime-color-scheme in Sublime as a JSON file. Go down to line 1263 and change #0D0DFF to #4040FF. Save the file and you should immediately see the change. Here's how it looks for me:

The brightness is a bit higher, but it's still the same basic hue.

If you still need a little more contrast, I'm considering highlighting the background of the entire interpolation, not just the punctuation around it. Something like this (background #FFBF0028):

Let me know what you think.

Thanks,
Matt

[MattDMo]

If you want to test out the background, put your cursor at the very beginning of Line 1270 and paste in

        {
            "name": "String interpolation",
            "scope": "meta.interpolation",
            "background": "#FFBF0028",
        },

[rfricz]

The background is really good, I'm voting for that. But #4040FF is still not enough for my setup – I ended up using #0B93FF, the color used for keywords.

Thanks so much!

[MattDMo]

I typically try to not reuse colors, especially from common scopes like keywords, so I think I'll keep #4040FF. However, there is an easy way to override scopes. Create Packages/User/Neon.sublime-color-scheme as a JSON file and add the following to it:

{
    "variables":
    {
    },
    "globals":
    {
    },
    "rules":
    [
        {
            "name": "String interpolation delimiters",
            "scope": "punctuation.section.interpolation",
            "foreground": "#0B93FF"
        },
    ]
}

This way you can customize any scope you want (even adding new ones or deleting ones you don't like) and you don't have to worry about your changes being overridden by a new version.

Thanks for the feedback, and please let me know if you need anything else!