CODEWITHSUNDEEP
cssatom-editor
TheKitMurkit
TheKitMurkit

Reputation: 501

How to make folders in Atom tree view slightly different color

Is it possible to edit Atom styles so that folders in tree view would display in, say, slightly lighter tone of it's color?

Folders can be green, yellow, etc. depending on git status. But it would probably be easier to visually grep files if folders had defferent tone.

EDIT: Just to clarify - i wanted to ask about folder text, not the icons.

To the right is what I have in Atom, on the left it is probably Sublime.

enter image description here

Upvotes: 0

Views: 3027

Answers (2)

idleberg
idleberg

Reputation: 12882

You can add your preferred style in the editor style-sheet.

Using hard-coded colors

Example #1

// Icon and text */
span.icon-file-directory {
    color: yellow;
}

Example #2

/* Icon only */
span.icon-file-directory:before {
    color: red;
}

Of course, you can combine both examples to set hard-coded colors for both, icon (:before) and text!

Using theme colors

Since you don't have access to the @variables of the theme and probably don't want to use hard-coded color values, opacity or filter are viable alternatives. I'm going to use saturate() in the following examples, but see CSS-Tricks for other options.

Example #1

/* Icon only */
span.icon-file-directory:before {
    -webkit-filter: ~"saturate(200%)";
}

Example #2

To change the color of the text only, you can use this trick

/* Saturate color of icon and text  */
span.icon-file-directory {
  -webkit-filter: ~"saturate(200%)";
}

/* Desaturate icon to its original color value*/
span.icon-file-directory:before {
    -webkit-filter: ~"saturate(50%)";
}

The ~ indicates that the LESS compiler escapes the string inside the quotes, so it's not confused with a (missing) LESS function. Also, the current version of Atom (v1.13 as I'm writing this) still requires the vendor-prefix for CSS filters.

Upvotes: 5

Rando Hinn
Rando Hinn

Reputation: 1322

Unfortunately, atom does not seem to have a concept in their stylesheet for folders, otherwize you could use CSS, but there is not a specific selector to do so. You can use Ctrl+Shift+I to open the devtools however, and see what classes (since atom is pure html) are applied to folders, though and see if you can figure out something from there to use in your styles.less

Upvotes: 0

Related Questions