CODEWITHSUNDEEP
cssatom-editor
pourmesomecode
pourmesomecode

Reputation: 4338

Styling Atom Text Editor

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?

Upvotes: 6

Views: 14281

Answers (2)

Vucko
Vucko

Reputation: 20834

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?

Upvotes: 9

MustafaHi_
MustafaHi_

Reputation: 31

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.

Upvotes: 2

Related Questions