所有主题

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

部分主题

// 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'

图标支持

使用 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' } 
    } 
  } 
  ...
})

<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>
<iconify-icon icon="cil:truck" style="font-size: 18px" height="2em"></iconify-icon>

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

自定义组件 CSS

可以通过覆盖根级别的 CSS 变量来自定义默认主题的 CSS：

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

import '@theojs/lumen/theme'
import './var.css'

export default DefaultTheme
..

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

查看

默认组件 CSS 变量

内容来获取可以被覆盖的变量。

默认组件 CSS 变量

内容来获取可以被覆盖的变量。

示例

容器

输入

> [这是一个链接](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

这是一个链接

这是一段文字

自定义容器

输入

::: 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!')

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

这是一个链接

这是一段文字

default^1.9.0betacautioncustom elementbetacautioncustom element

图片浅色与深色模式

输入

深浅模式图片

<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU){.light-only}

<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU){.dark-only}

<!-- 深色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

<!-- 浅色模式 -->

![](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)

带描述的深浅模式图片

![浅色模式{.light-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU)

![深色模式{.dark-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU)

![深色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

![浅色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)

输出

浅色模式