Available CSS classes?


I can’t find color syntax for my taste, so I wanted to create my CSS for it. Where can I find the list of all available classes which I can use for speciffic color ?? In example CSS are only “tree-view”, “atom-text-editor” and “atom-text-editor::shadow .cursor” !!??

I’d like to get a full CSS from a theme which I could update to my taste.

Thanx for all the info.


For the UI basics:

For syntax highlighting I think it mostly follows TextMate naming conventions but you’ll have to inspect the specific syntax you use to be sure.


If you want to change a lot, it would make sense to create your own custom theme. See the Docs for some help.

If you just want to make a few tweaks to your favorite theme. Open your .atom/styles.less file. There you can override any styles. For syntax highlighting, you need to start your selector with atom-text-editor::shadow. Something like:

atom-text-editor::shadow {
  .comment {
    color: red;
  .variable {
    color: yellow;

You can use the DevTools (View > Developer> Toggle Developer Tools), then inspect the DOM to see what classes are used.