Changing comment colour in Atom editor

Nathaniel picture Nathaniel · May 4, 2016 · Viewed 17.3k times · Source

I would like to change the colour of comments in the Atom editor. From a bit of googling, I found I can put the following in my .atom/styles.less file:

atom-text-editor::shadow .comment {
    color: #ffffaa;
}

That's great - now I have bright yellow comments that demand to be noticed rather than fading into the background. The trouble is that it now looks like the below

enter image description here

As you can see, the text colour of the comments has changed, but the comment delimiters and links within comments remain in the default almost-invisible-grey, which looks a bit silly.

My questions are (1) how can I change the colour of these items, and more importantly (2) where can I look up how to change the colour of these items?

Please note that I am not a web programmer and know nothing of CSS or any related technologies. I am therefore looking for a fairly step-by-step solution, in contrast to solutions found, for example, in the answers to this question, which assume a substantial amount of background in the inner workings of this stuff.

Answer

basiphobe picture basiphobe · Apr 12, 2017

Using 1.14.4:

// This styles comment text
atom-text-editor .syntax--comment {
    color: #53FFA1;
}

// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
    color: #008C3F;
}