How to remove the colors from the file tree


#1

##Hey.

I am looking for a way to remove the different colors from the file tree.
I have tried to edit the @text variables in ui-variables, but that was without any luck.

Thanks in advance.
//JapSeyz


#2

You can use the Atom > Open Your Stylesheet menu item to open your stylesheet override file. What colors are you trying to remove?


#3

All unnatural colors in the file-tree.

I am not really looking to use it with git, just as a standard dev tool.
Disabeling all git packages didn’t really do the trick, nor did overwriting the @text codes in the theme.


#4

You can use the web dev tools to see what css rules you need to override.


#5

I thought that you could just override the .tree-view.status-modified class (among others), but I can’t seem to get it to work right now. Unfortunately, I have to run off to some appointments. I’ll try and fiddle with it later too.

I’m pretty sure there are other posts though that talk about how to override these particular classes.


#6

Alright, thanks to the both of you!
I’ll look a bit at it later :slight_smile:


#7

I think I got it working with a mix of dev tools and stylesheet hacks…

Is it possible to just disable git , as I have no intentions of using git with this, at least not right now.


#8

You can override .status-modified and .status-added, but you have to use the !important declaration (I think because the original selector is considered more selective by CSS)


#9

Not really, there is a class in Core specifically for Git integration that too many other classes depend on being there.


#10

Okay thanks, wasn’t sure why it worked for me, so thanks :wink:


#11

Okay, a bit sad - but every great editor has a “downside”


#12

Generally if you have issue with selectors priority in Atom, just open the devtools and look at the rule that apply, copy it and then use it in your stylesheet.

Relying on !important to override a style should be as a bad practice in Atom as it is in any other context.


#13

I’m having a hard figuring how a better git integration can be seen as a bad thing, when so many editors lack of it.

If you see status colors in the tree it means you are working in a git repository, don’t you find that having visual feedback on the repository status right in your editor is an improvement?

No irony, I’m just curious here. I must say that I already completely integrated this in my workflow and It came handy many times already, that’s why I’m wondering what reasons can lead you to want to get rid of it.


#14

Well i am working on git purely with a single friend on a single project, and we work on different times of the day, so i have no real need to see which files I’ve edited before i commit.


#15

I too would like to disable this if possible. I liked it at first. I actually loved it at first. But now I just find it annoying. I don’t really care to see what files I’ve changed. And it throws me off when using the file tree. I tend to favor the highlighted folders and files for no good reason. Kind of distracting!

<3


#16

It should be possible with a rule like this one in your stylesheet:

.list-tree li.list-nested-item[class*='status-'] > .list-item {
  color: {your-ui-theme-text-color};
}

#17

One big reason I want to turn off the colors is that the shade of red used for modified files is hard to read when using the Atom Light theme.

Also, in general, red means danger and draws attention, which is distracting when you’re trying to visually scan the file tree for a certain file.

I’d rather not have to screw with the css for such a simple thing. It would be nice if there was a simple checkbox somewhere to turn off the coloring.


#18

It’s much MUCH simpler to write a CSS rule for that than to include a setting to match the tastes of every users.


#19

Atom > Open Your Stylesheet. Then paste this CSS.

.list-tree li.list-nested-item[class*='status-'] > .list-item {
    color: #333 !important;
}

.icon-file-text {
  color:#333 !important;
}

#20

Thanks,
It worked for me :slight_smile: