Obsidian 可以很方便地通过添加 CSS 代码片段，改变外观，可以很方便个性化定制自己的主题。
偶然看到一个多彩标签样式，很漂亮，但是感觉不够实用，分不出主次。
用 AI 修改了下符合自己审美的样式。见下图，浅色模式和深色模式。激活的标签颜色会比较深，底部线条也会略厚。其它标签会比较暗，线条会略细。鼠标悬停时，标签也会变亮，交互感比较强。
附上代码：
/* --- Obsidian 彩虹标签：亮色模式优化版 --- */
.theme-light {
/* 1. 基础结构：保持背景透明，文字清晰 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header {
background-color: transparent !important;
transition: all 0.2s ease-in-out;
border-bottom: 3px solid transparent;
border-radius: 0 0 5px 5px;
color: var(--text-muted); /* 默认文字颜色 */
}
/* 2. 激活状态：文字完全黑亮，背景微弱阴影区分 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header.is-active {
color: var(--text-normal) !important;
background-color: rgba(0, 0, 0, 0.03) !important; /* 淡淡的灰色底，区分当前页 */
border-bottom: 4px solid transparent;
}
/* 3. 十色循环逻辑 (10n+1 到 10n+10) */
/* 1. 红色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1) { border-bottom-color: rgba(211, 47, 47, 0.4); color: #c62828; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1):hover { border-bottom-color: rgb(211, 47, 47); }
/* 2. 蓝色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2) { border-bottom-color: rgba(25, 118, 210, 0.4); color: #1565c0; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2):hover { border-bottom-color: rgb(25, 118, 210); }
/* 3. 绿色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3) { border-bottom-color: rgba(56, 142, 60, 0.4); color: #2e7d32; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3):hover { border-bottom-color: rgb(56, 142, 60); }
/* 4. 黄褐色 (亮色模式下纯黄太晃眼，调深一点) */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4) { border-bottom-color: rgba(245, 124, 0, 0.4); color: #ef6c00; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4):hover { border-bottom-color: rgb(245, 124, 0); }
/* 5. 紫色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5) { border-bottom-color: rgba(123, 31, 162, 0.4); color: #6a1b9a; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5):hover { border-bottom-color: rgb(123, 31, 162); }
/* 6. 橙红 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6) { border-bottom-color: rgba(230, 74, 25, 0.4); color: #bf360c; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6):hover { border-bottom-color: rgb(230, 74, 25); }
/* 7. 青蓝色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7) { border-bottom-color: rgba(0, 151, 167, 0.4); color: #00838f; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7):hover { border-bottom-color: rgb(0, 151, 167); }
/* 8. 深酸橙 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8) { border-bottom-color: rgba(175, 180, 43, 0.4); color: #827717; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8):hover { border-bottom-color: rgb(175, 180, 43); }
/* 9. 靛蓝色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9) { border-bottom-color: rgba(48, 63, 159, 0.4); color: #283593; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9):hover { border-bottom-color: rgb(48, 63, 159); }
/* 10. 翠绿色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n) { border-bottom-color: rgba(104, 159, 56, 0.4); color: #33691e; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n):hover { border-bottom-color: rgb(104, 159, 56); }
}
/* --- Obsidian 彩虹标签：深色模式优化版 --- */
.theme-dark {
/* 1. 基础结构：保持背景透明，文字清晰 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header {
background-color: transparent !important;
transition: all 0.2s ease-in-out;
border-bottom: 3px solid transparent;
border-radius: 0 0 5px 5px;
color: var(--text-muted); /* 非激活文字稍微柔和 */
}
/* 2. 激活状态：文字完全发亮，背景微弱区分 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header.is-active {
color: var(--text-normal) !important;
background-color: rgba(255, 255, 255, 0.03) !important;
border-bottom: 4px solid transparent;
}
/* 3. 十色循环逻辑 (10n+1 到 10n+10) */
/* 1. 红色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1) { border-bottom-color: rgba(239, 83, 80, 0.3); color: #ef9a9a; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1):hover { border-bottom-color: rgb(239, 83, 80); }
/* 2. 蓝色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2) { border-bottom-color: rgba(66, 165, 245, 0.3); color: #90caf9; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2):hover { border-bottom-color: rgb(66, 165, 245); }
/* 3. 绿色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3) { border-bottom-color: rgba(102, 187, 106, 0.3); color: #a5d6a7; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3):hover { border-bottom-color: rgb(102, 187, 106); }
/* 4. 黄色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4) { border-bottom-color: rgba(255, 202, 40, 0.3); color: #fff59d; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4):hover { border-bottom-color: rgb(255, 202, 40); }
/* 5. 紫色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5) { border-bottom-color: rgba(171, 71, 188, 0.3); color: #ce93d8; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5):hover { border-bottom-color: rgb(171, 71, 188); }
/* 6. 橙色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6) { border-bottom-color: rgba(255, 112, 67, 0.3); color: #ffab91; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6):hover { border-bottom-color: rgb(255, 112, 67); }
/* 7. 青色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7) { border-bottom-color: rgba(38, 198, 218, 0.3); color: #80deea; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7):hover { border-bottom-color: rgb(38, 198, 218); }
/* 8. 酸橙绿 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8) { border-bottom-color: rgba(212, 225, 87, 0.3); color: #e6ee9c; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8):hover { border-bottom-color: rgb(212, 225, 87); }
/* 9. 靛蓝 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9) { border-bottom-color: rgba(126, 87, 194, 0.3); color: #b39ddb; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9):hover { border-bottom-color: rgb(126, 87, 194); }
/* 10. 浅绿色 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n) { border-bottom-color: rgba(156, 204, 101, 0.3); color: #c5e1a5; }
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n).is-active,
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n):hover { border-bottom-color: rgb(156, 204, 101); }
}
如果还是觉得其它标签有颜色会夺走注意力，可以试下下面这个版本。取消其它非激活标签颜色，当激活或者鼠标悬浮时点亮。代码经过精简优化。如下图示：
同样附上代码：
/* --- Obsidian 彩虹标签：全模式通用简洁版 --- */
/* 1. 定义颜色变量 */
.theme-dark {
--tab-outline-alpha: 0.3;
--tab-bg-active: rgba(255, 255, 255, 0.03);
--tab-c1: #ef5350; --tab-c2: #42a5f5; --tab-c3: #66bb6a; --tab-c4: #ffca28; --tab-c5: #ab47bc;
--tab-c6: #ff7043; --tab-c7: #26c6da; --tab-c8: #d4e157; --tab-c9: #7e57c2; --tab-c10: #9ccc65;
}
.theme-light {
--tab-outline-alpha: 0.4;
--tab-bg-active: rgba(0, 0, 0, 0.03);
--tab-c1: #c62828; --tab-c2: #1565c0; --tab-c3: #2e7d32; --tab-c4: #ef6c00; --tab-c5: #6a1b9a;
--tab-c6: #bf360c; --tab-c7: #00838f; --tab-c8: #827717; --tab-c9: #283593; --tab-c10: #33691e;
}
/* 2. 统一基础样式 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header {
background-color: transparent !important;
transition: all 0.2s ease-in-out;
border-bottom: 3px solid transparent;
border-radius: 0 0 5px 5px;
color: var(--text-muted);
}
/* 激活与悬停状态 */
:where(.workspace .mod-root .workspace-tabs) .workspace-tab-header.is-active {
color: var(--text-normal) !important;
background-color: var(--tab-bg-active) !important;
border-bottom: 5px solid transparent;
border-radius: 0 0 8px 8px;
}
/* 3. 核心循环逻辑 (使用颜色变量) */
/* 这里定义一个通用的染色宏样式，减少重复写法 */
.workspace-tab-header { border-bottom-color: rgba(var(--target-color), var(--tab-outline-alpha)); }
/* 批量设置颜色序号 */
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+1) { --cur-c: var(--tab-c1); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+2) { --cur-c: var(--tab-c2); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+3) { --cur-c: var(--tab-c3); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+4) { --cur-c: var(--tab-c4); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+5) { --cur-c: var(--tab-c5); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+6) { --cur-c: var(--tab-c6); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+7) { --cur-c: var(--tab-c7); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+8) { --cur-c: var(--tab-c8); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+9) { --cur-c: var(--tab-c9); }
:where(.workspace-tabs) .workspace-tab-header:nth-child(10n+10) { --cur-c: var(--tab-c10); }
/* 应用颜色到边框和文字 */
:where(.workspace-tabs) .workspace-tab-header {
color: var(--cur-c);
border-bottom-color: color-mix(in srgb, var(--cur-c) transparent calc(100% - (var(--tab-outline-alpha) * 100%)));
}
/* 激活或悬停时取消透明度（点亮线条） */
:where(.workspace-tabs) .workspace-tab-header.is-active,
:where(.workspace-tabs) .workspace-tab-header:hover {
border-bottom-color: var(--cur-c);
}
单点维护：如果你觉得线条太细了，改 border-bottom: 3px；如果觉得不激活时太暗了，改 --tab-outline-alpha: 0.5。
非常感谢原始样式提供者，正因为你们无私地分享，才能让后来者能个性化出自己的样式。
Tag： #Obsidian #CSS
文章评论