Obsidian样式：多彩标签页样式

[熊猫别熬夜 (噗~)]

打开多个标签页时，默认的标签页样式较为单一，通过为标签页添加多彩的背景色和字体色，不仅可以美化界面，还能速区分不同的标签页。

CSS 效果

标签页模式：

堆叠模式：

CSS 样式

/* !添加多彩标签页 在stacked和非stacked模式下都生效  */
.theme-light {
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+1) {
    background-color: #ffebee;
    color: #c62828;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+2) {
    background-color: #e3f2fd;
    color: #1565c0;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+3) {
    background-color: #e8f5e9;
    color: #2e7d32;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+4) {
    background-color: #fffde7;
    color: #f9a825;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+5) {
    background-color: #f3e5f5;
    color: #6a1b9a;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+6) {
    background-color: #fbe9e7;
    color: #d84315;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+7) {
    background-color: #e0f7fa;
    color: #00838f;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+8) {
    background-color: #f9fbe7;
    color: #827717;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+9) {
    background-color: #ede7f6;
    color: #4527a0;
  }

  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n) {
    background-color: #f1f8e9;
    color: #33691e;
  }

}

/* 深色模式下的多彩tab配色 */
.theme-dark {
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+1) {
    background-color: #2d2323;
    color: #ff8a80;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+2) {
    background-color: #1a237e;
    color: #90caf9;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+3) {
    background-color: #1b5e20;
    color: #a5d6a7;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+4) {
    background-color: #f9a825;
    color: #fffde7;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+5) {
    background-color: #4a148c;
    color: #e1bee7;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+6) {
    background-color: #bf360c;
    color: #ffccbc;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+7) {
    background-color: #006064;
    color: #b2ebf2;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+8) {
    background-color: #827717;
    color: #f9fbe7;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+9) {
    background-color: #4527a0;
    color: #ede7f6;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n) {
    background-color: #33691e;
    color: #f1f8e9;
  }
}

相关样式

• 240404_Obsidian样式-多行标签页堆叠显示|Obsidian样式-多行标签页堆叠显示

[FOXENON]

感谢。用AI改成了底部线段的效果，修改了深色模式下的配色。

/* ================ 多彩标签页 - 底部线条版 ================ */
/* --- 浅色模式 --- */
.theme-light {
  /* 统一设置标签基础样式 */
  .workspace .mod-root .workspace-tabs .workspace-tab-header {
    /* 移除默认背景色，使用一个通用背景 */
    background-color: var(--background-secondary);
    /* 增加过渡效果，让交互更平滑 */
    transition: border-bottom-color 0.2s ease-in-out;
    /* 设置底部线条样式：宽度、样式、颜色（默认透明）、圆角 */
    border-bottom: 3px solid transparent;
    border-radius: 0 0 5px 5px; /* 给线条末端加圆角 */
  }
  /* 分别为每个标签设置线条颜色和文字颜色 */
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+1) {
    border-bottom-color: #c62828; /* 深红线 */
    color: #c62828;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+2) {
    border-bottom-color: #1565c0; /* 深蓝线 */
    color: #1565c0;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+3) {
    border-bottom-color: #2e7d32; /* 深绿线 */
    color: #2e7d32;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+4) {
    border-bottom-color: #f9a825; /* 琥珀线 */
    color: #f9a825;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+5) {
    border-bottom-color: #6a1b9a; /* 深紫线 */
    color: #6a1b9a;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+6) {
    border-bottom-color: #d84315; /* 深橙线 */
    color: #d84315;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+7) {
    border-bottom-color: #00838f; /* 深青线 */
    color: #00838f;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+8) {
    border-bottom-color: #827717; /* 深橄榄线 */
    color: #827717;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n+9) {
    border-bottom-color: #4527a0; /* 深靛蓝线 */
    color: #4527a0;
  }
  .workspace .mod-root .workspace-tabs .workspace-tab-header:nth-child(10n) {
    border-bottom-color: #33691e; /* 深酸橙绿线 */
    color: #33691e;
  }
}
/* --- 深色模式 --- */
.theme-dark {
  /* 统一设置标签基础样式 */
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header {
    /* 移除默认背景色，使用一个通用背景 */
    background-color: var(--background-secondary);
    /* 增加过渡效果 */
    transition: border-bottom-color 0.2s ease-in-out;
    /* 设置底部线条样式 */
    border-bottom: 3px solid transparent;
    border-radius: 0 0 5px 5px; /* 给线条末端加圆角 */
  }
  /* 分别为每个标签设置线条颜色和文字颜色 */
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+1) {
    border-bottom-color: #ef5350; /* 柔和红线 */
    color: #ef9a9a;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+2) {
    border-bottom-color: #42a5f5; /* 柔和蓝线 */
    color: #90caf9;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+3) {
    border-bottom-color: #66bb6a; /* 柔和绿线 */
    color: #a5d6a7;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+4) {
    border-bottom-color: #ffca28; /* 柔和黄线 */
    color: #fff59d;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+5) {
    border-bottom-color: #ab47bc; /* 柔和紫线 */
    color: #ce93d8;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+6) {
    border-bottom-color: #ff7043; /* 柔和橙线 */
    color: #ffab91;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+7) {
    border-bottom-color: #26c6da; /* 柔和青线 */
    color: #80deea;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+8) {
    border-bottom-color: #d4e157; /* 柔和酸橙绿线 */
    color: #e6ee9c;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n+9) {
    border-bottom-color: #7e57c2; /* 柔和靛蓝线 */
    color: #b39ddb;
  }
  :where(.workspace .mod-root .workspace-tabs) .workspace-tab-header:nth-child(10n) {
    border-bottom-color: #9ccc65; /* 柔和绿线 */
    color: #c5e1a5;
  }
}

[熊猫别熬夜 (噗~)]

可以的，用上了哈

[litscorpi]

感谢，很好看，就是不太好区分。用AI做了自己喜欢的版本。有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); }
}