主题模式

Teek 内置了 4 种主题尺寸，8 种主题风格可供切换，在右下角的两个按钮进行体验。

如果想拓展主题尺寸和主题风格，前往 主题模式拓展。

主题尺寸

4 种主题尺寸分别为 small、default、large、wide，默认为 default。

• small：首页的文章列表和卡片栏宽度会相对缩小，文章页的宽度也会相对缩小
• default：Vitepress 默认尺寸
• large：首页的文章列表和卡片栏宽度相对放大，文章页的侧边栏往左稍微移动，内容区稍微变大
• wide：首页的文章列表和右侧卡片栏宽度会放大，且文章页的侧边栏移到最左边，内容区也会尽可能铺满剩下的空间，适合宽屏浏览

可以通过主题配置的 themeSetting.themeSize 来设置默认的主题尺寸。

import defineTeekConfig from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeSetting: {
    themeSize: "large",
  },
});

如果不想在右下角显示主题尺寸切换按钮（不允许用户手动切换），可以设置 themeSetting.useThemeSize 为 false：

import defineTeekConfig from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeSetting: {
    useThemeSize: false,
  },
});

主题风格

8 种主题风格分别为 vp-default、vp-green、vp-yellow、vp-red、el-blue、el-green、el-yellow、el-red。

其中 vp- 开头的使用 Vitepress 内置的颜色样式，el- 开头的使用 Element Plus 的颜色样式。

可以通过主题配置的 themeSetting.themeStyle 来设置默认的主题风格。

import defineTeekConfig from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeSetting: {
    themeStyle: "vp-red",
  },
});

如果不想在右下角显示主题风格切换按钮（不允许用户手动切换），可以设置 themeSetting.useThemeStyle 为 false：

import defineTeekConfig from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  themeSetting: {
    useThemeStyle: false,
  },
});

文档单独配置

Teek 支持在 Markdown 的 frontmatter 配置主题风格和主题尺寸来覆盖全局的设置。

---
themeStyle: vp-green
themeSize: large
---

当你访问该文档时，页面的风格和尺寸会根据 frontmatter 的配置进行切换，此外你仍然可以在右下角切换其他的主题风格和主题尺寸。