J

主题

2025-03-082025-07-03配置配置
1878
9.9m
Get...

主题增强拓展 ​

在 主题增强 中介绍了主题风格的使用，而不同的用户有不同的审美需求，因此 Teek 支持用户修改自带的主题模式，也可以拓展全新的主题模式。

主题风格 ​

主题风格修改 ​

Teek 使用 VitePress 的 css var 变量来实现主题风格。当切换尺寸时，Teek 会修改 html 标签的 theme-color 属性，进而改变 css var 变量，从而达到修改主题风格的效果。

如果觉得 Teek 提供的主题风格不符合自己的风格，可以修改不同 theme-color 下对应的 css var 变量来达到目的。

Teek 主题风格的 css var 变量如下：

scss
@use "../mixins/function" as *;

html[theme-color="vp-green"] {
  --vp-c-indigo-1: var(--vp-c-green-1);
  --vp-c-indigo-2: var(--vp-c-green-2);
  --vp-c-indigo-3: var(--vp-c-green-3);
  --vp-c-indigo-soft: var(--vp-c-green-soft);
}

/* VitePress 黄色 */
html[theme-color="vp-yellow"] {
  --vp-c-indigo-1: var(--vp-c-yellow-1);
  --vp-c-indigo-2: var(--vp-c-yellow-2);
  --vp-c-indigo-3: var(--vp-c-yellow-3);
  --vp-c-indigo-soft: var(--vp-c-yellow-soft);
}

/* VitePress 红色 */
html[theme-color="vp-red"] {
  --vp-c-indigo-1: var(--vp-c-red-1);
  --vp-c-indigo-2: var(--vp-c-red-2);
  --vp-c-indigo-3: var(--vp-c-red-3);
  --vp-c-indigo-soft: var(--vp-c-red-soft);
}

/* element plus 蓝色 */
html[theme-color="ep-blue"] {
  --vp-c-indigo-1: #{getCssVar("el-color-primary")};
  --vp-c-indigo-2: #{getCssVar("el-color-primary-light-3")};
  --vp-c-indigo-3: #{getCssVar("el-color-primary-light-5")};
  --vp-c-indigo-soft: #{getCssVar("el-color-primary-light-9")};
}

/* element plus 绿色 */
html[theme-color="ep-green"] {
  --vp-c-indigo-1: #{getCssVar("el-color-success")};
  --vp-c-indigo-2: #{getCssVar("el-color-success-light-3")};
  --vp-c-indigo-3: #{getCssVar("el-color-success-light-5")};
  --vp-c-indigo-soft: #{getCssVar("el-color-success-light-9")};
}

/* element plus 黄色 */
html[theme-color="ep-yellow"] {
  --vp-c-indigo-1: #{getCssVar("el-color-warning")};
  --vp-c-indigo-2: #{getCssVar("el-color-warning-light-3")};
  --vp-c-indigo-3: #{getCssVar("el-color-warning-light-5")};
  --vp-c-indigo-soft: #{getCssVar("el-color-warning-light-9")};
}

/* element plus 红色 */
html[theme-color="ep-red"] {
  --vp-c-indigo-1: #{getCssVar("el-color-danger")};
  --vp-c-indigo-2: #{getCssVar("el-color-danger-light-3")};
  --vp-c-indigo-3: #{getCssVar("el-color-danger-light-5")};
  --vp-c-indigo-soft: #{getCssVar("el-color-danger-light-9")};
}

提示

--vp-c-indigo-1 为 VitePress 的核心主题色，在修改或者拓展时，您应该考虑优先修改该 var 变量。

您可以创建一个 css 文件来修改上面提供的变量，如在 vp-green 主题风格下修改 --vp-c-indigo-1 变量：

tk-theme-color.css
css
html[theme-color="vp-green"] {
  --vp-c-indigo-1: #395ae3;
}

在 .vitepress/theme/index.ts 文件引入该 css 文件：

index.ts
ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
import "./style/tk-theme-color.css";

export default {
  extends: Teek,
};

这样在 vp-green 主题风格下，--vp-c-indigo-1 变量被设置为 #395AE3。

主题风格拓展 ​

Teek 支持额外追加自定义的主题风格，首先在 scss 文件定义自定义主题风格的 css var 变量

如添加 github 主题风格：

scss
html[theme-color="github-blue"] {
  --vp-c-indigo-1: xx;
  --vp-c-indigo-2: xx;
  --vp-c-indigo-3: xx;
  --vp-c-indigo-soft: xx;
  // ...... 修改其他 VitePress 提供的 css var 变量
}

html[theme-color="github-green"] {
  --vp-c-indigo-1: xxx;
  --vp-c-indigo-2: xxx;
  --vp-c-indigo-3: xxx;
  --vp-c-indigo-soft: xxx;
  // ...... 修改其他 VitePress 提供的 css var 变量
}

在 .vitepress/theme/index.ts 文件引入该 css 文件：

index.ts
ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
import "./style/tk-theme-color.css";

export default {
  extends: Teek,
};

然后通过主题配置的 themeEnhance.themeColor.append 追加自定义主题风格，如：

ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeEnhance: {
    append: {
      themeStyleAppend: [
        {
          label: "Github 主题", // 主题组名称
          tip: "Github 主题", // 主题组提示信息，鼠标悬停时显示
          options: [
            { label: "风格 1", value: "github-blue" },
            { label: "风格 2", value: "github-green" },
          ],
        },
      ],
    },
  },
});

这样您就可以在主题增强面板里看到注册的 Github 主题。

主题风格扩散 ​

您可以在主题增强面板看到 扩散 单选框，激活后 Teek 将根据 --vp-c-indigo-1 自动计算出其他颜色，然后扩散到全局。

主题尺寸 ​

Teek 使用 css var 变量来实现主题尺寸。当切换尺寸时，Teek 会修改 html 标签的 theme-size 属性，进而改变 css var 变量，从而达到修改主题尺寸的效果。

如果觉得 Teek 提供的主题尺寸不符合自己的风格，可以修改不同 theme-size 下对应的 css var 变量来达到目的。

提示

主题尺寸仅作用在 Teek 的首页已经自定义页，不会修改 VitePress 的默认主题。

Teek 主题尺寸的 css var 变量如下：

scss
@use "../mixins/mixins" as *;
@use "../mixins/function" as *;

html[theme-size="wide"] {
  @include set-css-var("home-max-width", 1400px);
  @include set-css-var("home-gap", getCssVar("gap3"));
  @include set-css-var("home-post-simple-img-width", 160px);
  @include set-css-var("home-post-full-img-width", 360px);
  @include set-css-var("home-post-full-img-height", 100%);
  @include set-css-var("home-post-line-clamp", 4);
  @include set-css-var("home-card-padding", 15px);
  @include set-css-var("home-card-width", 350px);
  @include set-css-var("home-card-svg-margin-left", 10px);
  @include set-css-var("home-font-size-large", 19px);
  @include set-css-var("home-font-size-base", 17px);
  @include set-css-var("home-font-size-middle", 15px);
  @include set-css-var("home-font-size-sm", 14px);
  @include set-css-var("home-font-size-small", 13px);
  @include set-css-var("home-page-width", 1100px);
  @include set-css-var("home-footer-group-width", 100%);
}

html[theme-size="large"] {
  @include set-css-var("home-max-width", 1330px);
  @include set-css-var("home-gap", getCssVar("gap3"));
  @include set-css-var("home-post-simple-img-width", 160px);
  @include set-css-var("home-post-full-img-width", 360px);
  @include set-css-var("home-post-full-img-height", 100%);
  @include set-css-var("home-post-line-clamp", 4);
  @include set-css-var("home-card-padding", 15px);
  @include set-css-var("home-card-width", 350px);
  @include set-css-var("home-card-svg-margin-left", 10px);
  @include set-css-var("home-font-size-large", 19px);
  @include set-css-var("home-font-size-base", 17px);
  @include set-css-var("home-font-size-middle", 15px);
  @include set-css-var("home-font-size-sm", 14px);
  @include set-css-var("home-font-size-small", 13px);
  @include set-css-var("home-page-width", 1100px);
  @include set-css-var("home-footer-group-width", 90%);
}

:root,
html[theme-size="default"] {
  @include set-css-var("home-max-width", 1140px);
  @include set-css-var("home-gap", getCssVar("gap2"));
  @include set-css-var("home-post-simple-img-width", 120px);
  @include set-css-var("home-post-simple-img-height", 80px);
  @include set-css-var("home-post-full-img-width", 240px);
  @include set-css-var("home-post-full-img-height", 100%);
  @include set-css-var("home-post-line-clamp", 3);
  @include set-css-var("home-card-padding", 10px);
  @include set-css-var("home-card-width", 280px);
  @include set-css-var("home-card-svg-margin-left", 5px);
  @include set-css-var("home-font-size-large", 18px);
  @include set-css-var("home-font-size-base", 16px);
  @include set-css-var("home-font-size-middle", 14px);
  @include set-css-var("home-font-size-sm", 13px);
  @include set-css-var("home-font-size-small", 12px);
  @include set-css-var("page-width", 900px);
  @include set-css-var("home-footer-group-width", 80%);
}

html[theme-size="small"] {
  @include set-css-var("home-max-width", 1000px);
  @include set-css-var("home-gap", getCssVar("gap2"));
  @include set-css-var("home-post-simple-img-width", 100px);
  @include set-css-var("home-post-simple-img-height", 80px);
  @include set-css-var("home-post-full-img-width", 130px);
  @include set-css-var("home-post-full-img-height", 100%);
  @include set-css-var("home-post-line-clamp", 2);
  @include set-css-var("home-card-padding", 8px);
  @include set-css-var("home-card-width", 260px);
  @include set-css-var("home-card-svg-margin-left", 4px);
  @include set-css-var("home-font-size-large", 17px);
  @include set-css-var("home-font-size-base", 15px);
  @include set-css-var("home-font-size-middle", 13px);
  @include set-css-var("home-font-size-sm", 13px);
  @include set-css-var("home-font-size-small", 12px);
  @include set-css-var("page-width", 800px);
  @include set-css-var("home-footer-group-width", 70%);
}

@media (min-width: 768px) {
  :root,
  html[theme-size="large"],
  html[theme-size="default"],
  html[theme-size="small"] {
    @include set-css-var("home-card-width", 280px);
  }
}

@media (max-width: 768px) {
  :root,
  html[theme-size="large"],
  html[theme-size="default"],
  html[theme-size="small"] {
    @include set-css-var("home-card-width", 100%);
  }
}

您可以创建一个 css 文件来修改上面提供的变量，如在 default 尺寸下，将 --tk-home-max-width 变量设置为 1280px：

tk-theme-size.css
css
:root,
html[theme-size="default"] {
  --tk-home-max-width: 1280px; /* 将 1140px 改为 1280px */
}

在 .vitepress/theme/index.ts 文件引入该 css 文件：

ts
import Teek from "vitepress-theme-teek";
import "vitepress-theme-teek/index.css";
import "./style/tk-theme-size.css";

export default {
  extends: Teek,
};

这样 default 尺寸下，--tk-home-max-width 变量被设置为 1280px。

最近更新