此页内容

约 318 字大约 1 分钟

2023-12-25

主题定制

支持自定义样式。

该功能由 @vuepress/plugin-palette 提供支持。

主题使用 SASS 作为 CSS 预处理器。

用户可以通过 style 文件 来添加额外的样式。

Style 文件

Style 文件的路径是 .vuepress/styles/index.scss

你可以在这里添加额外的样式,或者覆盖默认样式:

:root {
  scroll-behavior: smooth;
}

你也可以利用它来覆盖默认主题的预定义 CSS 变量。

以下是部分预定义变量, 完整列表请参考 vars.scss

:root {
  /** 主题颜色 */
  --vp-c-brand-1: #5086a1;
  --vp-c-brand-2: #6aa1b7;
  --vp-c-brand-3: #8cccd5;
  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);

 /** 背景颜色 */
  --vp-c-bg: #ffffff;
  --vp-c-bg-alt: #f6f6f7;
  --vp-c-bg-elv: #ffffff;
  --vp-c-bg-soft: #f6f6f7;

  /** 文本颜色 */
  --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);
}

.dark {
  --vp-c-brand-1: #8cccd5;
  --vp-c-brand-2: #6aa1b7;
  --vp-c-brand-3: #5086a1;
  --vp-c-brand-soft: rgba(131, 208, 218, 0.314);

  --vp-c-bg: #1b1b1f;
  --vp-c-bg-alt: #161618;
  --vp-c-bg-elv: #202127;
  --vp-c-bg-soft: #202127;

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