主题增强拓展
在 主题增强 中介绍了主题风格的使用，而不同的用户有不同的审美需求，因此 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-brand-1: var(--vp-c-green-1);
--vp-c-brand-2: var(--vp-c-green-2);
--vp-c-brand-3: var(--vp-c-green-3);
--vp-c-brand-soft: var(--vp-c-green-soft);
}
/* VitePress 黄色 */
html[theme-color="vp-yellow"] {
--vp-c-brand-1: var(--vp-c-yellow-1);
--vp-c-brand-2: var(--vp-c-yellow-2);
--vp-c-brand-3: var(--vp-c-yellow-3);
--vp-c-brand-soft: var(--vp-c-yellow-soft);
}
/* VitePress 红色 */
html[theme-color="vp-red"] {
--vp-c-brand-1: var(--vp-c-red-1);
--vp-c-brand-2: var(--vp-c-red-2);
--vp-c-brand-3: var(--vp-c-red-3);
--vp-c-brand-soft: var(--vp-c-red-soft);
}
/* element plus 蓝色 */
html[theme-color="ep-blue"] {
--vp-c-brand-1: #{getCssVar("el-color-primary")};
--vp-c-brand-2: #{getCssVar("el-color-primary-light-3")};
--vp-c-brand-3: #{getCssVar("el-color-primary-light-5")};
--vp-c-brand-soft: #{getCssVar("el-color-primary-light-9")};
}
/* element plus 绿色 */
html[theme-color="ep-green"] {
--vp-c-brand-1: #{getCssVar("el-color-success")};
--vp-c-brand-2: #{getCssVar("el-color-success-light-3")};
--vp-c-brand-3: #{getCssVar("el-color-success-light-5")};
--vp-c-brand-soft: #{getCssVar("el-color-success-light-9")};
}
/* element plus 黄色 */
html[theme-color="ep-yellow"] {
--vp-c-brand-1: #{getCssVar("el-color-warning")};
--vp-c-brand-2: #{getCssVar("el-color-warning-light-3")};
--vp-c-brand-3: #{getCssVar("el-color-warning-light-5")};
--vp-c-brand-soft: #{getCssVar("el-color-warning-light-9")};
}
/* element plus 红色 */
html[theme-color="ep-red"] {
--vp-c-brand-1: #{getCssVar("el-color-danger")};
--vp-c-brand-2: #{getCssVar("el-color-danger-light-3")};
--vp-c-brand-3: #{getCssVar("el-color-danger-light-5")};
--vp-c-brand-soft: #{getCssVar("el-color-danger-light-9")};
}提示
--vp-c-brand-1 为 VitePress 的核心主题色，在修改或者拓展时，您应该考虑优先修改该 var 变量。
您可以创建一个 css 文件来修改上面提供的变量，如在 vp-green 主题风格下修改 --vp-c-brand-1 变量：
css
html[theme-color="vp-green"] {
--vp-c-brand-1: #395ae3;
}在 .vitepress/theme/index.ts 文件引入该 css 文件：
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-brand-1 变量被设置为 #395AE3。
主题风格拓展
在右上角的主题增强面板可以看到 Teek 内置的 8 个主题风格，除此之外，Teek 支持额外追加自定义的主题风格。
有两种方式自定义主题风格
预设主题变量
首先在 scss 文件定义自定义主题风格的 css var 变量
如添加 github 主题风格：
scss
html[theme-color="github-blue"] {
--vp-c-brand-1: xx;
--vp-c-brand-2: xx;
--vp-c-brand-3: xx;
--vp-c-brand-soft: xx;
// ...... 修改其他 VitePress 提供的 css var 变量
}
html[theme-color="github-green"] {
--vp-c-brand-1: xxx;
--vp-c-brand-2: xxx;
--vp-c-brand-3: xxx;
--vp-c-brand-soft: xxx;
// ...... 修改其他 VitePress 提供的 css var 变量
}在 .vitepress/theme/index.ts 文件引入该 css 文件：
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 主题。
预设主色 v1.4.1
第一种方式需要提前在 html 的 theme-color 属性上提前预设好 4 个颜色，然后在主题增强面板点击主题风格更新 html 的 theme-color 值，从而修改 css var 变量达到目的。
第二种方式更加简单，只需要指定一个主色 color，Teek 通过内置的算法自动计算出其他颜色。
ts
import { defineTeekConfig } from "vitepress-theme-teek/config";
const teekConfig = defineTeekConfig({
themeEnhance: {
themeColor: {
append: [
{
label: "博客扩展主题", // 主题组名称
tip: "博客扩展主题", // 主题组提示信息，鼠标悬停时显示
options: [
{ label: "紫罗兰", value: "violet", color: "#7166f0" },
{ label: "珊瑚粉", value: "coral-pink", color: "#ff6b6b" },
{ label: "天蓝", value: "sky-blue", color: "#00bbf9" },
{ label: "蓝绿", value: "blue-green", color: "#00f5d4" },
{ label: "石板灰", value: "slate-gray", color: "#708090" },
{ label: "粉红", value: "pink", color: "#f15bb5" },
{ label: "黄绿", value: "yellow-green", color: "#8ac926" },
{ label: "橙红", value: "orange-red", color: "#ff9e6b" },
],
},
],
},
},
});主题风格扩散
您可以在主题增强面板看到 扩散 单选框，激活后 Teek 将根据 --vp-c-brand-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：
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。