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;
  }
}

相关样式

1 个赞