Changing Comment Colour in Atom Editor

Changing comment colour in Atom editor

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.

How to change color of comment marker for Atom editor?

If you place your cursor immediately to the left of the character you want to style and then press Ctrl-Alt-Shift-P all of the scopes for that character will be displayed in an information box:

You can then incorporate this into your stylesheet as you have with the body of the comment:

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

  .punctuation.definition.comment {
    color: #E4F4FD;
  }
}

Because it is LESS, it is possible to nest classes which will make your style sheet much cleaner.

How to change default comments pattern in Atom (specifically for CSS)

Open your config file (using File -> Config) and add these lines to your config:

'.source.css':
  'editor':
    'commentStart': '/\* '
    'commentEnd': ' \*/'

This will change the default behavior of comments in CSS files from

/*COMMENTED TEXT*/

to

/* COMMENTED TEXT */

How can I customize the comment styles that come with Atom One Dark theme?

You shouldn't use atom-text-editor::shadow any more

You should now use

atom-text-editor.editor .syntax--comment {
  font-style: normal;
}

Atom Editor, change color of function call

atom-text-editor.editor {
  .syntax--meta.syntax--function-call.syntax--generic {
    color: #66D9EF;
  }
}

This works for me using magicpython.
Screenshot

How to change TODO highlight in atom editor

As GitHub's Atom Editor is built around HTML5 and CSS3 you can very easily change your style sheet, I've done a little recording on how to make this specific change below although you can apply the same principals to any styled element within the editor:

Step by Step

The first thing you will need to do is find an instance of the element you want to style, in this case I created a new, empty, file with the text //TODO: is too subtle.

1. You now need to find the appropriate selector for the word TODO, simply place your cursor in between the letters of the word TODO and press CtrlAltShiftP or select Editor: Log Cursor Scope from the command palette.
2. The selectors that apply to that location are listed from the least specific at the top to the most specific at the bottom, in this case you want the most specific selector at the bottom, go ahead and copy that into your clipboard.
3. Next you need to open your personal stylesheet, you can do this by selecting "Edit" and then "Stylesheet...", you can also choose Application: Open Your Stylesheet from the command palette.
4. Scroll to the bottom of the Stylesheet and paste in your selector from Step 2, you will need to add a period (full-stop) at the beginning to make this a valid selector.
5. Go ahead and add your preferred styling such your VIM style preference:

    atom-text-editor::shadow .type.class.todo {
      background-color: yellow;
      color: black;
      font-style: normal;
    }

6. Finally save your stylesheet and switch back to your test document to see the resulting changes.

Thanks to zypro for pointing out that my original answer didn't account for the use of the Shadow DOM in recent versions of Atom.

Update: At some point, Atom got rid of the Shadow DOM. I'm using version 1.34.0 which takes the following entry in the above-mentioned stylesheet:

atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
    background-color: yellow;
    color: black;
    font-style: normal;
}

Also, for Python (and some other languages) you will need to uncheck "Use Tree Sitter Parsers" in the Core settings.

---

Related Topics