Tree-view directory colors


I’m having a slight problem while building a ui theme.
When I modify items in the folder, every single items in the folder gets highlighted with orange.

Any Idea why?
Thanks for your help!


Mind posting a gif of this?


not at all


Alright, so looking at the behavior, we can hypothesize about why this might be happening. If all of those file names are children of an element with the class status-modified, and there’s no higher-priority rule determining their color, they should be changing color. Looking at the source of Atom itself with the dev tools (View -> Developer -> Toggle Developer Tools), we can see that each directory is encompassed by an <li>, and that it’s this <li>, not the <span> that defines the title itself, that is given the status-modified class. To fix this, you should change the selector to .status-modified > span, so that only the top-level child <span> tag will receive the color.


The thing is, even when I remove this whole code

.status               { color: @text-color; }
.status-added     { color: @text-color-success; } // green
.status-ignored   { color: @text-color-subtle; }  // faded
.status-modified  { color: @text-color-warning; } // orange
.status-removed  { color: @text-color-error; }   // red
.status-renamed  { color: @text-color-info; }    // blue

the same thing happens…


When you remove the whole code and reload Atom to make sure it compiles all new stylesheets?

Does it happen with other themes?


Well I’ve been using control + alt + cmd + l to reload atom after any major changes.
And no It dosen’t happen to any other themes.

Plus I’ve searched the whole project folder, and there are no other .status-modified used in the project.

Thanks again :slight_smile:


When you look at the <li> determining the styles directory, what rule is determining the color of the text?


I found out that if I uncheck this, the problem get solved. What does this mean??


It means that, even though you thought you deleted that rule, Atom is still using it. Try changing all of those selectors to include > span and then shutting down and reopening Atom.


Finally figured it out!
Your comments really helped.
Thank you! :grinning:


It would be interesting to differentiate directories and files using different colors, as the linux terminal does it. Thanks for listening me.


You can do that. All directory spans have the icon-file-directory class. Take a look at the tree view in the inspector.