One

主题

主题模式拓展 ​

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

主题风格 ​

主题风格修改 ​

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

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

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

scss
/* VitePress 绿色 */
html[theme-style="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-style="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-style="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-style="el-blue"] {
  --vp-c-brand-1: var(--el-color-primary);
  --vp-c-brand-2: var(--el-color-primary-light-3);
  --vp-c-brand-3: var(--el-color-primary-light-5);
  --vp-c-brand-soft: var(--el-color-primary-light-9);
}

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

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

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

可以自定义 css 文件，修改上面提供的变量，如：

tk-theme-style.css
css
html[theme-style="vp-green"] {
  --vp-c-brand-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-style.css";

export default {
  extends: Teek,
};

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

主题风格拓展 ​

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

scss
html[theme-style="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-style="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 变量
}

然后提供主题配置的 themeSetting.themeStyleAppend 追加自定义主题风格，如：

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

const teekConfig = defineTeekConfig({
  themeSetting: {
    themeStyleAppend: [
      {
        label: "Github", // 主题组名称
        tip: "Github 主题风格切换", // 主题组提示信息，鼠标悬停时显示
        options: [
          { name: "风格 1", style: "github-blue" }, // name 为主题名称，用于页面文字渲染；themeStyle 为主题风格标识，在 html 标签的 theme 属性添加该标识
          { name: "风格 2", style: "github-green" },
        ],
      },
    ],
  },
});

这样右下角的主题风格选择下拉框中，可以选中自定义主题风格。

主题尺寸 ​

主题尺寸修改 ​

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

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

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

scss
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);
  /* 数值越大，侧边栏约靠近屏幕左侧 */
  --vp-layout-max-width: 97vw;
  --vp-sidebar-width: 290px;
  --vp-content-container: 1800px;
}

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);
  --vp-layout-max-width: 90%;
  --vp-content-container: 1200px;
}

: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);
}

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);
  --vp-layout-max-width: 1300px;
  --vp-sidebar-width: 290px;
  --vp-content-container: 688px;
}

@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 文件，修改上面提供的变量，如：

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。

主题尺寸拓展 ​

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

scss
html[theme-size="custom"] {
  --tk-home-max-width: 1140px;
  // ......
}

然后提供主题配置的 themeSetting.themeStyleAppend 追加自定义主题尺寸，如：

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

const teekConfig = defineTeekConfig({
  themeSetting: {
    themeSizeAppend: [
      {
        name: "自定义", // 主题尺寸名称，用于页面文字渲染
        size: "custom", // 主题尺寸标识，Teek 在 html 标签的 size 属性添加该标识
      },
    ],
  },
});

这样右下角的主题尺寸选择下拉框中，可以选中自定义主题尺寸。