对博客的默认配色不满意? 自 v1.3.0 起支持更多的自定义配色啦!

---

文字主要配色

主要是链接特殊文字等颜色

:root {
  --vp-c-brand-1: #4b70df;
  --vp-c-brand-2: #2650dac8;
  --vp-c-brand-3: #3c83ba;
}
.dark:root {
  --vp-c-brand-1: #4b95df;
  --vp-c-brand-2: #198ed2;
  --vp-c-brand-3: #3c83ba;
}

标签颜色

被选中的 tag 和未被选择的 tag 的两套颜色

:root {
  --blog-tag-text-1: #303030cf;
  --blog-tag-bg-1: #fff;
  --blog-tag-bg-2: #2650daa4;
  --blog-tag-text-2: #fff;
}

.dark:root {
  --blog-tag-bg-2: #4b95df;
  --blog-tag-text-2: #fff;
  --blog-tag-bg-1: transparent;
  --blog-tag-text-1: #fff;
}

归档页时间线配色

:root {
  --blog-time-line-c: #3974e9;
  --blog-time-line-c2: #787878;
  --blog-time-line-text: #fff;
  --blog-time-line-text-bg: #2650daa4;
}

.dark:root {
  --blog-time-line-c: #fff;
  --blog-time-line-c2: #fff;
}

其他配色

.dark:root {
  --vp-c-blog-bg: var(--vp-c-bg-soft); //博客块
  --blog-border-c: rgb(61, 61, 63); // 博客块边框
}

:root {
  --vp-c-blog-bg: var(--vp-c-bg);
  --blog-border-c: rgb(227, 232, 247);
}

/* 容器配色 */

.custom-block {
  border: 1.5px solid transparent;
}

:root {
  --vp-custom-block-details-border: rgba(142, 150, 170, 0.28);
  --vp-custom-block-info-border: rgba(142, 150, 170, 0.28);
  --vp-custom-block-tip-border: rgba(100, 108, 255, 0.28);
  --vp-custom-block-warning-border: rgba(234, 179, 8, 0.28);
  --vp-custom-block-danger-border: rgba(244, 63, 94, 0.28);
}