配置主题

主题样式导入

全量导入

// .vitepress/theme/index.ts
import '@theojs/lumen/theme'

按需导入

// .vitepress/theme/index.ts
/* 徽章样式 */
import '@theojs/lumen/badge'
/* 按钮 */
import '@theojs/lumen/button'
/* 主题配色 */
import '@theojs/lumen/colors'
/* 文档基础样式 */
import '@theojs/lumen/doc'
/* 容器样式（警告、提示块等） */
import '@theojs/lumen/doc-blocks'
/* 首页样式 */
import '@theojs/lumen/home'
/* 首页按钮 */
import '@theojs/lumen/home-blocks'
/* 图标样式 */
import '@theojs/lumen/icon'
/* 图片样式 */
import '@theojs/lumen/pic'

图标支持

使用方法查看: https://iconify.design/docs/iconify-icon/

示例

<iconify-icon icon="simple-icons:fontawesome"></iconify-icon>
<iconify-icon icon="line-md:iconify2-static"></iconify-icon>
<iconify-icon icon="cil:locomotive" height="36"></iconify-icon>
<iconify-icon icon="cil:paper-plane" width="36"></iconify-icon>

自定义组件 CSS

默认使用 CSS 变量来管理样式。你可以通过覆盖根级 CSS 变量，轻松实现主题颜色及样式的个性化定制。

在主题入口导入自定义变量文件

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'

import '@theojs/lumen/theme'

import './var.css'

export default DefaultTheme

在 var.css 中覆盖变量

/* .vitepress/theme/var.css */
:root {
  --Announcement-bg: var(--vp-button-alt-bg);
  --Announcement-bg-hover: var(--vp-c-brand-soft);
}

查看默认组件 CSS 变量文件中查看所有可用变量，方便针对性覆盖。

内置样式示例

1. 容器

容器用于显示信息提示、警告、注意事项等内容，支持多种内置类型：

输入

> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

::: info
[这是一个链接](https://doc.theojs.cn/)

这是一段文字
:::

::: tip
[这是一个链接](https://doc.theojs.cn/)

这是一段文字
:::

::: warning
[这是一个链接](https://doc.theojs.cn/)

这是一段文字
:::

::: danger
[这是一个链接](https://doc.theojs.cn/)

这是一段文字
:::

::: details
[这是一个链接](https://doc.theojs.cn/)

这是一段文字
:::

输出

这是一个链接

这是一段文字

INFO

这是一个链接

这是一段文字

TIP

这是一个链接

这是一段文字

WARNING

这是一个链接

这是一段文字

DANGER

这是一个链接

这是一段文字

Details

这是一个链接

这是一段文字

2. 自定义容器

输入

::: danger STOP
[这是一个链接](https://doc.theojs.cn/)
:::

::: details Click me to view the code

```js
console.log('Hello, VitePress!')
```

:::

输出

STOP

这是一个链接

Click me to view the code

console.log('Hello, VitePress!')

3. GitHub 风格容器

输入

> [!NOTE]
>
> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

> [!TIP]
>
> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

> [!IMPORTANT]
>
> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

> [!WARNING]
>
> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

> [!CAUTION]
>
> [这是一个链接](https://doc.theojs.cn/)
>
> 这是一段文字

输出

NOTE

这是一个链接

这是一段文字

TIP

这是一个链接

这是一段文字

IMPORTANT

这是一个链接

这是一段文字

WARNING

这是一个链接

这是一段文字

CAUTION

这是一个链接

这是一段文字

4. Badge 组件

<Badge type="info" text="default" />
<Badge type="tip" text="^1.9.0" />
<Badge type="warning" text="beta" />
<Badge type="danger" text="caution" />
<Badge type="info">custom element</Badge>

default^1.9.0betacautioncustom element

图片的浅色和深色模式支持

输入

![浅色模式{.light-only}](https://i.theojs.cn/logo/github.svg)

![深色模式{.dark-only}](https://i.theojs.cn/logo/github-dark.svg)

![深色模式](https://i.theojs.cn/logo/github-dark.svg#dark)

![浅色模式](https://i.theojs.cn/logo/github.svg#light)

输出

浅色模式

深色模式

深色模式

浅色模式

报错解决

导入主题时报错: does not provide an export named 'load'

请按以下步骤操作以解决该问题：

pnpm

pnpm add recaptcha-v3

npm

npm install recaptcha-v3

yarn

yarn add recaptcha-v3

然后在 .vitepress/config.mts中添加以下内容

.vitepress/config.mts

import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    optimizeDeps: {
      include: ['recaptcha-v3']
    } 
  } 
})

使用 iconify-icon 时报错: [Vue warn]: Failed to resolve component: iconify-icon

.vitepress/config.mts

import { defineConfig } from 'vitepress'

export default defineConfig({
  vue: {
    template: {
      compilerOptions: { isCustomElement: (tag) => tag === 'iconify-icon' }
    } 
  } 
})