Obsidian样式：多彩标签页样式

熊猫别熬夜 · 2025 年9 月 25 日 06:27

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

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 · 2025 年10 月 20 日 06:03

感谢。用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;
  }
}

熊猫别熬夜 · 2025 年10 月 20 日 06:23

可以的，用上了哈