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

Question

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

文件夹可以是绿色、黄色等，具体取决于 git 状态。但是，如果文件夹具有不同的语气，则在视觉上 grep 文件可能会更容易。

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

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

Answer 1

您可以在编辑器样式表中添加您喜欢的样式。

使用硬编码颜色

示例#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编译逃脱引号内的字符串，所以它不与（失踪）所具有的功能相混淆。此外，当前版本的 Atom（我写这篇文章时为 v1.13）仍然需要 CSS 过滤器的供应商前缀。