Obsidian 学习笔记

Appearance

图谱与标签样式 ​

关系图谱和标签是 Obsidian 知识管理的核心视觉元素。通过 CSS 可以让它们更美观更易读。

图谱节点颜色 ​

css
/* 图谱节点颜色 */
.graph-view.color-fill {
  color: var(--interactive-accent);
}

/* 图谱连线 */
.graph-view.color-line {
  color: var(--background-modifier-border);
}

/* 高亮节点 */
.graph-view.color-fill-highlight {
  color: #7c3aed;
}

/* 高亮连线 */
.graph-view.color-line-highlight {
  color: #a78bfa;
}

/* 图谱背景 */
.graph-view.color-circle {
  color: var(--background-primary);
}

/* 节点文字 */
.graph-view.color-text {
  color: var(--text-muted);
}

按标签着色 ​

在图谱设置中为不同标签设置颜色后，用 CSS 微调：

css
/* 标签颜色节点 */
.graph-view.color-fill-tag {
  color: #22c55e;
}

/* 文件夹颜色节点 */
.graph-view.color-fill-attachment {
  color: #f59e0b;
}

/* 未链接笔记 */
.graph-view.color-fill-unresolved {
  color: #9ca3af;
  opacity: 0.5;
}

标签胶囊样式 ​

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);
  transform: scale(1.02);
}

标签前缀着色 ​

css
/* 按标签前缀着色 */
.tag[href^="#todo"],
.cm-hashtag:has-text("todo") {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6 !important;
}

.tag[href^="#done"],
.cm-hashtag:has-text("done") {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e !important;
}

.tag[href^="#idea"],
.cm-hashtag:has-text("idea") {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b !important;
}

.tag[href^="#book"],
.cm-hashtag:has-text("book") {
  background: rgba(139, 92, 246, 0.15);
  color: #8b5cf6 !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[href="#todo"] {
  background: linear-gradient(135deg, #f59e0b, #eab308);
}
a.tag[href="#done"] {
  background: linear-gradient(135deg, #10b981, #22c55e);
}
a.tag[href="#idea"] {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

标签面板美化 ​

css
/* 标签面板 */
.tag-pane-tag {
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.tag-pane-tag:hover {
  background: var(--background-modifier-hover);
}

/* 标签计数 */
.tag-pane-tag-count {
  background: var(--background-modifier-border);
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.8em;
  color: var(--text-muted);
}

相关内容 ​