Styling Atom Text Editor

Question

So i've opened up my Atom stylesheets which is named : styles.less and made some changes so my stylesheet now looks like :

tree-view {
  background-color: #101;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  color: white;
  background-color: #101;
}

// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor::shadow .cursor {
  border-color: red;
}

I'm trying to change the colour of the panels at the top and maybe a few other things. Is there anyway I can find out the class/ID names for elements in Atom for me to style?

Answer 1

One way is to open atom's developer tools.

On OSX -> View - Developer - Toggle Developer Tools

Where you can inspect the elements and find what you need.

Also see How to make Developer Tools appear?

Answer 2

You can view the StyleGuide from the menu > Packages > StyleGuide > show

or just click , Ctrl(Command) + Shift + G , there you will find all the class/ID names.