VitePress 的设计哲学和老派的 Hexo、WordPress 有点不同：它没有一个官方的“主题应用市场”。但这并不意味着它没有生态，事实上，GitHub 和 npm 上有大量前端大牛开源的高颜值主题。

以下是关于如何寻找主题以及如何应用第三方主题的完整指南。

一、 我去哪里找 VitePress 主题？

由于 VitePress 是基于 Vue 3 的，它的主题通常是以 npm 插件包的形式发布的。你可以通过以下几个渠道找到极具现代感的设计：

1. 寻找现成的优质主题（推荐）

如果你想要“高颜值、现代、带博客功能（标签、时间轴、评论）”，目前社区里最火、最成熟的几个专门的博客主题有：

• @sugarat/theme (粥里已知主题)：目前国内最火、完成度极高的 VitePress 博客主题。自带文章热度、字数统计、标签分类、精美的主页气泡效果，暗黑模式极其精致。
• vitepress-theme-blog：一款非常纯粹、工业风的极简博客主题，排版极其舒适。
• Fuwari 或 Astro-like 克隆版：不少开发者把其他框架（如 Astro）里惊艳的二次元/动漫风/极简风主题移植到了 VitePress。

2. 精准搜索暗号

• GitHub 搜索：直接在 GitHub 搜索关键字 vitepress-theme，按 Star 数量排序，你会发现新世界。
• Awesome 列表：在 GitHub 搜索 awesome-vitepress，里面会有一个专门的列表收集了全球开发者提交的优秀主题和插件。

二、 如何使用第三方自定义主题？

在 VitePress 中更换主题非常简单，核心逻辑只有两步：1. 用 npm 安装它 ➔ 2. 在 .vitepress/theme/index.mts 中引入它。

我们以安装社区大热的 @sugarat/theme 博客主题为例：

第一步：安装主题包

在你的项目根目录下，打开终端运行：

Bash

npm add @sugarat/theme -D

第二步：接管默认主题

在你的项目 .vitepress/ 文件夹下，看看有没有一个叫 theme 的文件夹。

• 如果没有，就新建一个文件夹叫 theme。
• 在 theme 文件夹下，新建一个文件叫 index.mts。

然后，把下面的代码复制到 .vitepress/theme/index.mts 中：

TypeScript

// .vitepress/theme/index.mts

// 1. 引入你刚刚安装的第三方主题
import BlogTheme from '@sugarat/theme'

// 2. 直接导出这个主题。VitePress 看到这个文件后，会自动停用官方默认皮肤，改用这个
export default BlogTheme

第三步：在 config.mts 中配置主题特有属性（可选）

不同的主题通常会提供一些专属的炫酷功能（比如增加社交卡片、网易云音乐挂件、评论区等）。这些功能可以直接写在你原本的 .vitepress/config.mts 的 themeConfig 里。

例如，这个主题支持设置文章作者和全局样式：

TypeScript

// .vitepress/config.mts
import { defineConfig } from 'vitepress'
import { getSidebar } from 'vitepress-plugin-auto-sidebar'

export default defineConfig({
  title: "我的技术笔记",
  themeConfig: {
    // ... 你原本的配置（如 nav, sidebar 依然保留） ...

    // 第三方主题独有的配置，直接加在这里即可
    blog: {
      author: '你的名字',
      avatar: '/avatar.png', // 你的头像路径
    }
  }
})

第四步：重新看效果

现在，在终端重新运行：

Bash

npm run docs:dev

你会发现整个网站的样式、主页布局、字数统计、暗黑模式切光特效都已经完全变成了新主题的精致高档模样。

💡 总结：以后如果你想换别的主题（比如叫 vitepress-theme-foo），只需 npm install vitepress-theme-foo，然后把 .vitepress/theme/index.mts 里的 import 路径换成它，就一键切换完成了。