How to change hyperlink syntax color in a atom theme

[cbstodd]

I would like to change the color of double quote string links in Atom themes, much like “Atom One Dark” has

As you can see the double quoted syntax color is purple. I would like to have the link color changed on other themes as well. I did a inspection and it looks to have the class elements of .markup.underline.link.https.hyperlink and I’ve tried to add it to atom-text-editor {} in styles.less but I can’t seem to get it working. Any ideas of how to do this?

[leedohm]

See the FAQ:

I'm trying to change my syntax colors from styles.less, but it isn't working!

The best way to tweak the syntax is to wrap your syntax style rules with atom-text-editor and then prepend every scope with syntax--. If you want your comments to be blue, for example, you would do the following: atom-text-editor { .syntax--comment { color: blue; } }

[cbstodd]

atom-text-editor::shadow { .markup.underline.link.https.hyperlink { color: #c678dd; } }

Worked like a charm. Thank you good sir!

[Miliia]

::shadow is depreciated.

Here is an example (check if your file is set to “plain text” for the test)

// color the links (blue font + underline) + set the comments in green
    atom-text-editor {
        .syntax--hyperlink {
          color: #2343ee;
        text-decoration: underline;}

        .syntax--comment { color: #15e817;}
    }