主题增强拓展

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

主题风格

主题风格修改

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

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

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

@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);}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);}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);}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")};}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")};}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")};}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变量：

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

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

importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import"./style/tk-theme-color.css";exportdefault{extends:Teek,};

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

主题风格拓展

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

如添加 github主题风格：

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;}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/theme/index.ts文件引入该 css文件：

importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import"./style/tk-theme-color.css";exportdefault{extends:Teek,};

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

import{defineTeekConfig } from"vitepress-theme-teek/config";constteekConfig=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变量如下：

@use"../mixins/mixins"as*;@use"../mixins/function"as*;html[theme-size="wide"] {@includeset-css-var("home-max-width",1400px);@includeset-css-var("home-gap",getCssVar("gap3"));@includeset-css-var("home-post-simple-img-width",160px);@includeset-css-var("home-post-full-img-width",360px);@includeset-css-var("home-post-full-img-height",100%);@includeset-css-var("home-post-line-clamp",4);@includeset-css-var("home-card-padding",15px);@includeset-css-var("home-card-width",350px);@includeset-css-var("home-card-svg-margin-left",10px);@includeset-css-var("home-font-size-large",19px);@includeset-css-var("home-font-size-base",17px);@includeset-css-var("home-font-size-middle",15px);@includeset-css-var("home-font-size-sm",14px);@includeset-css-var("home-font-size-small",13px);@includeset-css-var("home-page-width",1100px);@includeset-css-var("home-footer-group-width",100%);}html[theme-size="large"] {@includeset-css-var("home-max-width",1330px);@includeset-css-var("home-gap",getCssVar("gap3"));@includeset-css-var("home-post-simple-img-width",160px);@includeset-css-var("home-post-full-img-width",360px);@includeset-css-var("home-post-full-img-height",100%);@includeset-css-var("home-post-line-clamp",4);@includeset-css-var("home-card-padding",15px);@includeset-css-var("home-card-width",350px);@includeset-css-var("home-card-svg-margin-left",10px);@includeset-css-var("home-font-size-large",19px);@includeset-css-var("home-font-size-base",17px);@includeset-css-var("home-font-size-middle",15px);@includeset-css-var("home-font-size-sm",14px);@includeset-css-var("home-font-size-small",13px);@includeset-css-var("home-page-width",1100px);@includeset-css-var("home-footer-group-width",90%);}:root,html[theme-size="default"] {@includeset-css-var("home-max-width",1140px);@includeset-css-var("home-gap",getCssVar("gap2"));@includeset-css-var("home-post-simple-img-width",120px);@includeset-css-var("home-post-simple-img-height",80px);@includeset-css-var("home-post-full-img-width",240px);@includeset-css-var("home-post-full-img-height",100%);@includeset-css-var("home-post-line-clamp",3);@includeset-css-var("home-card-padding",10px);@includeset-css-var("home-card-width",280px);@includeset-css-var("home-card-svg-margin-left",5px);@includeset-css-var("home-font-size-large",18px);@includeset-css-var("home-font-size-base",16px);@includeset-css-var("home-font-size-middle",14px);@includeset-css-var("home-font-size-sm",13px);@includeset-css-var("home-font-size-small",12px);@includeset-css-var("page-width",900px);@includeset-css-var("home-footer-group-width",80%);}html[theme-size="small"] {@includeset-css-var("home-max-width",1000px);@includeset-css-var("home-gap",getCssVar("gap2"));@includeset-css-var("home-post-simple-img-width",100px);@includeset-css-var("home-post-simple-img-height",80px);@includeset-css-var("home-post-full-img-width",130px);@includeset-css-var("home-post-full-img-height",100%);@includeset-css-var("home-post-line-clamp",2);@includeset-css-var("home-card-padding",8px);@includeset-css-var("home-card-width",260px);@includeset-css-var("home-card-svg-margin-left",4px);@includeset-css-var("home-font-size-large",17px);@includeset-css-var("home-font-size-base",15px);@includeset-css-var("home-font-size-middle",13px);@includeset-css-var("home-font-size-sm",13px);@includeset-css-var("home-font-size-small",12px);@includeset-css-var("page-width",800px);@includeset-css-var("home-footer-group-width",70%);}@media(min-width:768px) {:root,html[theme-size="large"],html[theme-size="default"],html[theme-size="small"] {@includeset-css-var("home-card-width",280px);}}@media(max-width:768px) {:root,html[theme-size="large"],html[theme-size="default"],html[theme-size="small"] {@includeset-css-var("home-card-width",100%);}}

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

:root,html[theme-size="default"] {--tk-home-max-width:1280px;}

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

importTeek from"vitepress-theme-teek";import"vitepress-theme-teek/index.css";import"./style/tk-theme-size.css";exportdefault{extends:Teek,};

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