Tree-view directory colors


#1

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!


#2

Mind posting a gif of this?


#3

not at all


#4

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.


#5

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…


#6

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

Does it happen with other themes?


#7

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:


#8

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


#9

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


#10

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.


#11

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


#12

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


#13

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