css - 如何使 Atom TreeView 中的文件夹颜色略有不同

Question

是否可以编辑 Atom 样式，以便 TreeView 中的文件夹以比方说略浅的色调显示？

文件夹可以是绿色、黄色等，具体取决于 git 状态。但是，如果文件夹具有不同的色调，则可能更容易直观地 grep 文件。

编辑:只是为了澄清 - 我想问的是文件夹文本，而不是图标。

右边是我在 Atom 中的，左边可能是 Sublime。

Answer 1

您可以在 editor style-sheet 中添加您喜欢的样式.

使用硬编码颜色

示例#1

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

示例 #2

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

当然，您可以结合这两个示例来为图标(:before)和文本设置硬编码颜色!

使用主题颜色

由于您无权访问主题的 @variables 并且可能不想使用硬编码的 color 值，opacity 或 filter 是可行的选择。我将在以下示例中使用 saturate()，但请参阅 CSS-Tricks其他选项。

示例#1

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

示例#2

要只改变文本的颜色，你可以使用这个技巧

/* 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%)";
}

~ 表示 LESS 编译器对引号内的字符串进行转义，因此它不会与(缺失的)LESS 函数混淆。此外，当前版本的 Atom(我写这篇文章时是 v1.13)仍然需要 CSS 过滤器的供应商前缀。