Vitepress Theme Teek

主题

Teeker2025-03-08 01:46:39
2353
12.3m
0

主题增强拓展 ​

主题色板 ​

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

主题色板修改 ​

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

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

Teek 主题色板的 css var 变量如下：

scss
@use "../mixins/function" as *;

/* VitePress 成功色 */
html[theme-color="vp-success"] {
  --vp-c-brand-1: var(--vp-c-success-1);
  --vp-c-brand-2: var(--vp-c-success-2);
  --vp-c-brand-3: var(--vp-c-success-3);
  --vp-c-brand-soft: var(--vp-c-success-soft);
}

/* VitePress 警告色 */
html[theme-color="vp-warning"] {
  --vp-c-brand-1: var(--vp-c-warning-1);
  --vp-c-brand-2: var(--vp-c-warning-2);
  --vp-c-brand-3: var(--vp-c-warning-3);
  --vp-c-brand-soft: var(--vp-c-warning-soft);
}

/* VitePress 危险色 */
html[theme-color="vp-danger"] {
  --vp-c-brand-1: var(--vp-c-danger-1);
  --vp-c-brand-2: var(--vp-c-danger-2);
  --vp-c-brand-3: var(--vp-c-danger-3);
  --vp-c-brand-soft: var(--vp-c-danger-soft);
}

/* element plus 品牌色 */
html[theme-color="tk-primary"] {
  --vp-c-brand-1: #{getCssVar(color-primary)};
  --vp-c-brand-2: #{getCssVar(color-primary-light-3)};
  --vp-c-brand-3: #{getCssVar(color-primary-light-5)};
  --vp-c-brand-soft: #{getCssVar(color-primary-light-8)};
}

/* element plus 成功色 */
html[theme-color="tk-success"] {
  --vp-c-brand-1: #{getCssVar(color-success)};
  --vp-c-brand-2: #{getCssVar(color-success-light-3)};
  --vp-c-brand-3: #{getCssVar(color-success-light-5)};
  --vp-c-brand-soft: #{getCssVar(color-success-light-8)};
}

/* element plus 警告色 */
html[theme-color="tk-warning"] {
  --vp-c-brand-1: #{getCssVar(color-warning)};
  --vp-c-brand-2: #{getCssVar(color-warning-light-3)};
  --vp-c-brand-3: #{getCssVar(color-warning-light-5)};
  --vp-c-brand-soft: #{getCssVar(color-warning-light-8)};
}

/* element plus 危险色 */
html[theme-color="tk-danger"] {
  --vp-c-brand-1: #{getCssVar(color-danger)};
  --vp-c-brand-2: #{getCssVar(color-danger-light-3)};
  --vp-c-brand-3: #{getCssVar(color-danger-light-5)};
  --vp-c-brand-soft: #{getCssVar(color-danger-light-8)};
}

/* element plus 品牌色 */
html[theme-color="tk-primary"] {
  --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-8)};
}

/* element plus 成功色 */
html[theme-color="ep-success"] {
  --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-8)};
}

/* element plus 警告色 */
html[theme-color="ep-warning"] {
  --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-8)};
}

/* element plus 危险色 */
html[theme-color="ep-danger"] {
  --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-8)};
}

提示

--vp-c-brand-1 为 VitePress 的核心主题色，在修改或者拓展时，您应该考虑优先修改该 var 变量。

您可以创建一个 css 文件来修改上面提供的变量，如在 vp-success 主题色板下修改 --vp-c-brand-1 变量：

css
html[theme-color="vp-success"] {
  --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-success 主题色板下，--vp-c-brand-1 变量被设置为 #395AE3。

主题色板拓展 ​

在右上角的主题增强面板可以看到 Teek 内置的 12 个主题色板，除此之外，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: {
    themeColor: {
      append: [
        {
          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[tk-theme-size="wide"] {
  @include set-css-var(home-max-width, 1420px);
  @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, 480px);
  @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[tk-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, 420px);
  @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, 1000px);
  @include set-css-var(home-footer-group-width, 90%);
}

:root,
html[tk-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, 360px);
  @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-card-border-radius, 4px);
  @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[tk-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, 240px);
  @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[tk-theme-size="large"],
  html[tk-theme-size="default"],
  html[tk-theme-size="small"] {
    @include set-css-var(home-card-width, 280px);
  }
}

@media (max-width: 768px) {
  :root,
  html[tk-theme-size="large"],
  html[tk-theme-size="default"],
  html[tk-theme-size="small"] {
    @include set-css-var(home-card-width, 100%);
  }
}

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

css
:root,
html[tk-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。

最近更新