【样式分享】彩虹目录 2025 版,兼容大多数主题

有群友表示很喜欢 composer 主题,但是又割舍不了其他主题的彩虹目录,于是我简单研究了下配置了一款全新的彩虹目录的 CSS 片段样式

可以在这里下载 css 文件 https://wxycbt0cjk.feishu.cn/wiki/Bpt1wC87bit8eVkkGvdcpwXwnYf

或者查看文末的 css 源码,自行添加

样式展示

  • Composer 主题

  • Border 主题

  • Primary 主题

源代码

/* @settings
name: Rainbow Tree (彩虹目录)
id: obsidian-rainbow-tree
author: vran
date: 2025-06-06
description: obsidian 彩色目录
settings:
    -
        id: about-rainbow-tree
        title: About
        title.zh: 关于
        description: "Created by [vran](https://github.com/vran-dev/obsidian-composer)"
        description.zh: "由 [components](https://cp.cc1234.cc) 插件作者 [vran](https://github.com/vran-dev/obsidian-composer) 创建并分享"
        type: info-text
        markdown: true
    - id: folder-bg-opacity-setting
      title: Folder Background Opacity
      title.zh: 文件夹背景不透明度
      description: Set the background opacity of the folder
      description.zh: 设置文件夹的背景不透明度
      type: variable-number
      default: 0.08
      min: 0
      max: 1
    - id: folder-text-opacity-setting
      title: Folder Text Opacity
      title.zh: 文件夹文本不透明度
      description: Set the text opacity of the folder
      description.zh: 设置文件夹的文本不透明度
      type: variable-number
      default: 0.85
      min: 0
      max: 1
    - id: folder-hover-opacity-setting
      title: Folder Hover Opacity
      title.zh: 文件夹悬停不透明度
      description: Set the hover opacity of the folder
      description.zh: 设置文件夹的悬停不透明度
      type: variable-number
      default: 0.12
      min: 0
      max: 1
    - id: folder-sub-bg-opacity-setting
      title: Folder Sub Background Opacity
      title.zh: 子文件夹背景不透明度
      description: Set the background opacity of the sub-folder
      description.zh: 设置子文件夹的背景不透明度
      type: variable-number
      default: 0.04
      min: 0
      max: 1
    - id: folder-sub-text-opacity-setting
      title: Folder Sub Text Opacity
      title.zh: 子文件夹文本不透明度
      description: Set the text opacity of the sub-folder
      description.zh: 设置子文件夹的文本不透明度
      type: variable-number
      default: 0.7
      min: 0
      max: 1
*/
.workspace-leaf-content[data-type="file-explorer"] {
  --folder-bg-opacity: var(--folder-bg-opacity-setting, 0.08);
  --folder-text-opacity: var(--folder-text-opacity-setting, 0.85);
  --folder-hover-opacity: var(--folder-hover-opacity-setting, 0.12);
  --folder-sub-bg-opacity: var(--folder-sub-bg-opacity-setting, 0.04);
  --folder-sub-text-opacity: var(--folder-sub-text-opacity-setting, 0.7);

  /* 背景色 - 基于主题的暖色调 */
  --folder-bg-1: rgba(var(--color-red-rgb), var(--folder-bg-opacity));
  --folder-bg-2: rgba(var(--color-blue-rgb), var(--folder-bg-opacity));
  --folder-bg-3: rgba(var(--color-green-rgb), var(--folder-bg-opacity));
  --folder-bg-4: rgba(var(--color-orange-rgb), var(--folder-bg-opacity));
  --folder-bg-5: rgba(var(--color-purple-rgb), var(--folder-bg-opacity));
  --folder-bg-6: rgba(var(--color-cyan-rgb), var(--folder-bg-opacity));
  --folder-bg-7: rgba(var(--color-pink-rgb), var(--folder-bg-opacity));

  /* 字体色 - 基于主题的深色系 */
  --folder-text-1: rgba(var(--color-red-rgb), var(--folder-text-opacity));
  --folder-text-2: rgba(var(--color-blue-rgb), var(--folder-text-opacity));
  --folder-text-3: rgba(var(--color-green-rgb), var(--folder-text-opacity));
  --folder-text-4: rgba(var(--color-orange-rgb), var(--folder-text-opacity));
  --folder-text-5: rgba(var(--color-purple-rgb), var(--folder-text-opacity));
  --folder-text-6: rgba(var(--color-cyan-rgb), var(--folder-text-opacity));
  --folder-text-7: rgba(var(--color-pink-rgb), var(--folder-text-opacity));

  /* 悬停状态 - 稍微加深背景 */
  --folder-hover-1: rgba(var(--color-red-rgb), var(--folder-hover-opacity));
  --folder-hover-2: rgba(var(--color-blue-rgb), var(--folder-hover-opacity));
  --folder-hover-3: rgba(var(--color-green-rgb), var(--folder-hover-opacity));
  --folder-hover-4: rgba(var(--color-orange-rgb), var(--folder-hover-opacity));
  --folder-hover-5: rgba(var(--color-purple-rgb), var(--folder-hover-opacity));
  --folder-hover-6: rgba(var(--color-cyan-rgb), var(--folder-hover-opacity));
  --folder-hover-7: rgba(var(--color-pink-rgb), var(--folder-hover-opacity));

  /* 子目录淡化色 */
  --folder-sub-bg-1: rgba(var(--color-red-rgb), var(--folder-sub-bg-opacity));
  --folder-sub-bg-2: rgba(var(--color-blue-rgb), var(--folder-sub-bg-opacity));
  --folder-sub-bg-3: rgba(var(--color-green-rgb), var(--folder-sub-bg-opacity));
  --folder-sub-bg-4: rgba(
    var(--color-orange-rgb),
    var(--folder-sub-bg-opacity)
  );
  --folder-sub-bg-5: rgba(
    var(--color-purple-rgb),
    var(--folder-sub-bg-opacity)
  );
  --folder-sub-bg-6: rgba(var(--color-cyan-rgb), var(--folder-sub-bg-opacity));
  --folder-sub-bg-7: rgba(var(--color-pink-rgb), var(--folder-sub-bg-opacity));

  --folder-sub-text-1: rgba(
    var(--color-red-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-2: rgba(
    var(--color-blue-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-3: rgba(
    var(--color-green-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-4: rgba(
    var(--color-orange-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-5: rgba(
    var(--color-purple-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-6: rgba(
    var(--color-cyan-rgb),
    var(--folder-sub-text-opacity)
  );
  --folder-sub-text-7: rgba(
    var(--color-pink-rgb),
    var(--folder-sub-text-opacity)
  );
}

/* 顶级目录配色 - 根据序号循环展示7种颜色 */
.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 1)
  > .nav-folder-title {
  background-color: var(--folder-bg-1);
  color: var(--folder-text-1);
  --nav-collapse-icon-color: var(--folder-text-1);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 2)
  > .nav-folder-title {
  background-color: var(--folder-bg-2);
  color: var(--folder-text-2);
  --nav-collapse-icon-color: var(--folder-text-2);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 3)
  > .nav-folder-title {
  background-color: var(--folder-bg-3);
  color: var(--folder-text-3);
  --nav-collapse-icon-color: var(--folder-text-3);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 4)
  > .nav-folder-title {
  background-color: var(--folder-bg-4);
  color: var(--folder-text-4);
  --nav-collapse-icon-color: var(--folder-text-4);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 5)
  > .nav-folder-title {
  background-color: var(--folder-bg-5);
  color: var(--folder-text-5);
  --nav-collapse-icon-color: var(--folder-text-5);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 6)
  > .nav-folder-title {
  background-color: var(--folder-bg-6);
  color: var(--folder-text-6);
  --nav-collapse-icon-color: var(--folder-text-6);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n)
  > .nav-folder-title {
  background-color: var(--folder-bg-7);
  color: var(--folder-text-7);
  --nav-collapse-icon-color: var(--folder-text-7);
  --icon-color: var(--nav-collapse-icon-color);
}

/* 子目录配色 - 继承父目录颜色但更淡 */
.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 1)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-1);
  color: var(--folder-sub-text-1);
  --nav-collapse-icon-color: var(--folder-text-1);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 2)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-2);
  color: var(--folder-sub-text-2);
  --nav-collapse-icon-color: var(--folder-text-2);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 3)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-3);
  color: var(--folder-sub-text-3);
  --nav-collapse-icon-color: var(--folder-text-3);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 4)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-4);
  color: var(--folder-sub-text-4);
  --nav-collapse-icon-color: var(--folder-text-4);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 5)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-5);
  color: var(--folder-sub-text-5);
  --nav-collapse-icon-color: var(--folder-text-5);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 6)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-6);
  color: var(--folder-sub-text-6);
  --nav-collapse-icon-color: var(--folder-text-6);
  --icon-color: var(--nav-collapse-icon-color);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n)
  .tree-item-children
  .nav-folder-title {
  background-color: var(--folder-sub-bg-7);
  color: var(--folder-sub-text-7);
  --nav-collapse-icon-color: var(--folder-text-7);
  --icon-color: var(--nav-collapse-icon-color);
}

/* 顶级目录悬停效果 */
.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 1)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-1);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 2)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-2);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 3)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-3);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 4)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-4);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 5)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-5);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n + 6)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-6);
}

.nav-files-container
  > div
  > .tree-item.nav-folder:nth-child(7n)
  > .nav-folder-title:hover {
  background-color: var(--folder-hover-7);
}

3 个赞

感谢分享!这个居然兼容border :face_holding_back_tears: