Equivalent to style.less for syntax


#1

So I was trying to make some very small changes to the syntax theme and was hoping there is an easier option than forking and working out my own. However I did not manage to get any changes trough style.less to the syntax coloring. Was wondering if there is any way to do this?


Altering Colors of Markdown List Markers
#2

The editor uses a shadow DOM, so the elements that make up your code aren’t directly reachable for your styles.less. If you want to tweak the syntax, you’ll have to prepend every rule with atom-text-editor::shadow. If you want your comments to be blue, for example, you would do the following:

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

#3

Thanks! That works like a charm. And sorry if it was a noob question, but I’m quite new to Atom and am more of a user of it, but still I like things to look well!


#4

Just to ask again (sorry did not found any guide about this on the net) for changing the colors of the tree-view files, based on git (e.g. modified, ignored and added) what is the correct thing to do? Is there anywhere actually a proper guide. The styleguide in Atom is nice, but would be really great if they also add the name of each attribute so it is easy to change.


#5

If you open Atom in Developer mode (atom --dev) you can right click any UI element. When you do, click on ‘Inspect Element’ and the Chrome Dev Tools will open with that element selected, giving you easy access to all the information you need to style it.


#6

There is a package for this, or maybe just an option in settings. Mine works this way.