如何在Atom树视图中使文件夹略有不同的颜色

Question

是否可以编辑Atom样式，以便树视图中的文件夹显示为比较浅的颜色？

根据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或{{ 1}}是可行的替代方案。我将在以下示例中使用filter，但有关其他选项，请参阅CSS-Tricks。

示例＃1

saturate()

示例＃2

要仅更改文本的颜色，您可以使用此技巧

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

/* 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过滤器的供应商前缀。

Answer 2

不幸的是，atom在文件夹的样式表中似乎没有概念，另外你可以使用CSS，但是没有特定的选择器可以这样做。您可以使用 Ctrl + Shift + I 来打开devtools，然后查看哪些类（因为atom是纯html）应用于文件夹但是，看看你是否可以从中找出一些东西用于你的style.less