One

主题

2025-03-082025-10-31配置配置
1878
9.9m
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 *;

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 变量：

tk-theme-color.css
css
html[theme-color='vp-green'] {
  --vp-c-indigo-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-color.css'

export default {
  extends: Teek,
}

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

主题风格拓展 ​

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

如添加 github 主题风格：

scss
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 文件：

index.ts
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 主题。

主题风格扩散 ​

您可以在主题增强面板看到 扩散 单选框，激活后 Teek 将根据 --vp-c-indigo-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：

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。

最近更新