主题增强拓展
在 主题增强 中介绍了主题风格的使用,而不同的用户有不同的审美需求,因此 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);
}
/* 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
变量:
html[theme-color="vp-green"] {
--vp-c-indigo-1: #395ae3;
}
在 .vitepress/theme/index.ts
文件引入该 css
文件:
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
主题风格:
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
文件:
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
追加自定义主题风格,如:
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
变量如下:
@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
:
:root,
html[theme-size="default"] {
--tk-home-max-width: 1280px; /* 将 1140px 改为 1280px */
}
在 .vitepress/theme/index.ts
文件引入该 css
文件:
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
。