Obsidian 学习笔记

Appearance

彩虹文件夹与标签着色 ​

当仓库中文件夹和标签数量多时，统一颜色难以快速定位。通过 CSS 着色可以让不同层级的文件夹和不同类型的标签呈现不同颜色。

彩虹文件夹 ​

按层级着色 ​

css
/* 第一级文件夹 - 彩虹色 */
.nav-folder:nth-child(6n+1) > .nav-folder-title { color: #ef4444; }
.nav-folder:nth-child(6n+2) > .nav-folder-title { color: #f59e0b; }
.nav-folder:nth-child(6n+3) > .nav-folder-title { color: #22c55e; }
.nav-folder:nth-child(6n+4) > .nav-folder-title { color: #3b82f6; }
.nav-folder:nth-child(6n+5) > .nav-folder-title { color: #8b5cf6; }
.nav-folder:nth-child(6n+6) > .nav-folder-title { color: #ec4899; }

带背景色 ​

css
/* 文件夹带浅色背景 */
.nav-folder:nth-child(6n+1) > .nav-folder-title {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-left: 3px solid #ef4444;
}
.nav-folder:nth-child(6n+2) > .nav-folder-title {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border-left: 3px solid #f59e0b;
}
/* ... 以此类推 */

/* 圆角和间距 */
.nav-folder-title {
  border-radius: 6px;
  padding: 4px 8px !important;
  margin: 2px 4px;
}

按文件夹名着色 ​

css
/* 特定文件夹着色 */
.nav-folder-title[data-path^="00-"] { color: #ef4444; }
.nav-folder-title[data-path^="01-"] { color: #f59e0b; }
.nav-folder-title[data-path^="02-"] { color: #22c55e; }
.nav-folder-title[data-path^="03-"] { color: #3b82f6; }
.nav-folder-title[data-path^="04-"] { color: #8b5cf6; }
.nav-folder-title[data-path^="05-"] { color: #ec4899; }

彩虹标签 ​

基础着色 ​

css
/* 标签胶囊样式 */
.tag,
.cm-hashtag {
  background-color: rgba(124, 58, 237, 0.15);
  color: #7c3aed !important;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.tag:hover {
  background-color: rgba(124, 58, 237, 0.25);
}

按标签名着色 ​

css
/* 重要标签 - 红色 */
.tag[href="#重要"],
.cm-hashtag:has-text("重要") {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444 !important;
}

/* 进行中 - 蓝色 */
.tag[href="#进行中"],
.cm-hashtag:has-text("进行中") {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6 !important;
}

/* 完成 - 绿色 */
.tag[href="#完成"],
.cm-hashtag:has-text("完成") {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e !important;
}

/* 想法 - 黄色 */
.tag[href="#想法"],
.cm-hashtag:has-text("想法") {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b !important;
}

渐变标签 ​

css
/* 渐变背景标签 */
a.tag {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white !important;
  border: none;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

a.tag:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* 不同标签不同渐变 */
a.tag[href="#todo"] {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}
a.tag[href="#done"] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}

文件夹图标着色 ​

css
/* 文件夹图标颜色跟随文件夹颜色 */
.nav-folder:nth-child(6n+1) .nav-folder-title .collapse-icon svg {
  color: #ef4444;
}
.nav-folder:nth-child(6n+2) .nav-folder-title .collapse-icon svg {
  color: #f59e0b;
}

相关内容 ​