H1标题颜色

当然

同理，你也可以改 H2-H6 的标题，不过我感觉没必要，太花里胡哨了

说明

background: 采用了一个线性渐变

background-clip: 使文本的背景颜色与渐变效果相同

text-fill-color：将文字透明

配置

在docs\.vitepress\theme\style\文件夹中创建var.scss文件，并添加以下内容

css

/* docs\.vitepress\theme\style\var.scss */
/* H1标题颜色 */
.VPDoc h1 {
  background: linear-gradient(
    114.2deg,
    rgba(184, 215, 21, 1) -15.3%,
    rgba(148, 187, 233, 1) 14.5%,
    rgba(21, 215, 182, 1) 38.7%,
    rgba(129, 189, 240, 1) 58.8%,
    rgba(240, 129, 129, 1) 88.5%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在Demo\docs-base\.vitepress\theme\style\文件中创建index.scss文件，并添加以下内容

scss

@use "./var.scss" as *; //自定义变量

引入

在Demo\docs-base\.vitepress\theme\index.ts文件中引入以下内容

import "./style/index.scss";  // 引入Demo\docs-base\.vitepress\theme\style\index.scss全局样式

H1标题颜色 ​

配置 ​

引入 ​

H1标题颜色

配置

引入