对博客定制css样式表的记录

:root {

  /**
   * 主题色
   * -------------------------------------------------------------------------- */

  --vp-c-brand-1: rgba(56, 205, 133, 1);              /* 链接颜色、强调色 */
  --vp-c-brand-2: rgba(71, 255, 165, 1);              /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: rgba(56, 205, 133, 1);              /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 218, 159, 0.314);      /* 辅助色 */

  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */

  --vp-c-text-1: rgba(60, 60, 67);                    /* 主要文本 */
  --vp-c-text-2: rgba(60, 60, 67, 0.78);              /* 次要文本 */
  --vp-c-text-3: rgba(60, 60, 67, 0.56);              /* 辅助文本 */

  /**
   * 背景色
   * -------------------------------------------------------------------------- */

  --vp-c-bg: #fff;                                    /* 主体背景 */
  --vp-nav-bg-color: #fff;                            /* 导航栏背景 */
  --vp-nav-screen-bg-color: #fff;                     /* 移动端导航栏 */
  --vp-local-nav-bg-color: #fff;                      /* 页面内导航栏 */
  --vp-sidebar-bg-color: #f6f6f7;                     /* 侧边栏背景 */
  --vp-code-block-bg: #f6f8fa;                        /* 代码块背景 */
}

[data-theme="dark"] {

  /**
   * 主题色
   * -------------------------------------------------------------------------- */

  --vp-c-brand-1: rgba(56, 205, 133, 1);              /* 链接颜色、强调色 */
  --vp-c-brand-2: rgba(71, 255, 165, 1);              /* 链接、按钮 hover 颜色 */
  --vp-c-brand-3: rgba(56, 205, 133, 1);              /* 背景色、边框色 */
  --vp-c-brand-soft: rgba(131, 218, 159, 0.314);      /* 辅助色 */

  /**
   * 文本颜色
   * -------------------------------------------------------------------------- */

  --vp-c-text-1: rgba(255, 255, 245, 0.86);           /* 主要文本 */
  --vp-c-text-2: rgba(235, 235, 245, 0.6);            /* 次要文本 */
  --vp-c-text-3: rgba(235, 235, 245, 0.38);           /* 辅助文本 */

  /**
   * 背景色
   * -------------------------------------------------------------------------- */

  --vp-c-bg: #1b1b1f;                                 /* 主体背景 */
  --vp-nav-bg-color: #1b1b1f;                         /* 导航栏背景 */
  --vp-nav-screen-bg-color: #1b1b1f;                  /* 移动端导航栏 */
  --vp-local-nav-bg-color: #1b1b1f;                   /* 页面内导航栏 */
  --vp-sidebar-bg-color: #161618;                     /* 侧边栏背景 */
  --vp-code-block-bg: #202127;                        /* 代码块背景 */
}

/* 隐藏标题前的#号 */
.header-anchor::before {
  display: none !important;
}

/* 二级标题样式 - 前面添加小绿条，默认正常颜色，悬停变绿 */
.vp-doc h2 {
  position: relative;
  padding-left: 1em;
  transition: color 0.1s, transform 0.1s;
}

.vp-doc h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 1em;
  background-color: var(--vp-c-brand-1);
  border-radius: 2px;
  transition: background-color 0.1s;
}

.vp-doc h2:hover {
  color: var(--vp-c-brand-1) !important;
  transform: translateX(3px);
}

.vp-doc h2:hover::before {
  background-color: var(--vp-c-brand-2);
}

/* 修复第一个二级标题的对齐问题 */
.vp-doc h2:first-of-type::before,
.vp-doc h1 + h2::before,
.vp-doc h2:first-child::before {
  transform: translateY(-25%);
}

/* 三级及以下标题样式 - 前面添加小绿条 */
.vp-doc h3,
.vp-doc h4,
.vp-doc h5,
.vp-doc h6 {
  position: relative;
  padding-left: 1.2em;
  transition: color 0.1s, transform 0.1s;
}

/* 三级及以下标题的小绿条 */
.vp-doc h3::before,
.vp-doc h4::before,
.vp-doc h5::before,
.vp-doc h6::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  background-color: var(--vp-c-brand-1);
  border-radius: 2px;
  transition: background-color 0.1s;
}

/* 三级及以下标题悬停效果 */
.vp-doc h3:hover,
.vp-doc h4:hover,
.vp-doc h5:hover,
.vp-doc h6:hover {
  color: var(--vp-c-brand-1) !important;
  transform: translateX(3px);
}

.vp-doc h3:hover::before,
.vp-doc h4:hover::before,
.vp-doc h5:hover::before,
.vp-doc h6:hover::before {
  background-color: var(--vp-c-brand-2);
}