Changing comment colour in Atom editor

Question

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

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 1

To find out the CSS classes of any element you want to style, follow these steps in the editor:

1. Use your cursor to highlight the element you want to inspect. I'm following your example of a double slash (i.e. a comment) here.
2. Press Ctrl+Alt+Shift+P (or Cmd+Alt+P on OS X). A pop-up will tell you all classes of that element. Usually, it's the last line of that notification that is of interest for us. For //, it is comment.line.double-slash.js.
3. Disregard the last dot and everything following it, since keeping it would apply your changes to a specific file type only (js in this case). Now prepend a dot. The remaining string is the element we want to style: .comment.line.double-slash.

Open the .atom/styles.less by opening the command pallette (Ctrl+Shift+P on Windows/Linux or Cmd+Shift+P on OSX) and searching for "Application: Open Your Stylesheet".

Append these lines to .atom/styles.less, if not already present:

atom-text-editor::shadow {
    // custom comment styling goes here
}

Inside the brackets you can place CSS/LESS code for any element you want to customize.

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

---

Additional advice: you can enumerate element identifiers as a comma-and-space-separated list, if the same changes should apply to them. So if you want to make links the same color as comments, there are two possibilities:

.comment.line.double-slash {
    color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
    color: #ffffaa;
}

or

.comment.line.double-slash, .markup.underline.link.hyperlink {
    color: #ffffaa;
}

With long class names as they are used here, I'd prefer the first option for readability. But that's up to your choice.

Answer 2

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;
}

Answer 3

The syntax is changed in 1.14. Now, you need to use this for changing the comment color

atom-text-editor .syntax--comment {
         color: #228B22;
}