vant 4 正式发布，支持暗黑主题，那么是如何实现的呢

2022年10月25日首发于掘金，现在同步到公众号。

11. 前言

大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.6k+人）第一的专栏，写有20余篇源码文章。

---

我们开发业务时经常会使用到组件库，一般来说，很多时候我们不需要关心内部实现。但是如果希望学习和深究里面的原理，这时我们可以分析自己使用的组件库实现。有哪些优雅实现、最佳实践、前沿技术等都可以值得我们借鉴。

相比于原生 JS 等源码。我们或许更应该学习，正在使用的组件库的源码，因为有助于帮助我们写业务和写自己的组件。

如果是 Vue 技术栈，开发移动端的项目，大多会选用 vant 组件库，目前（2022-10-24） star 多达 20.3k。我们可以挑选 vant 组件库学习，我会写一个组件库源码系列专栏^[1]，欢迎大家关注。

这次我们来分析 vant4 新增的暗黑主题是如何实现的。文章中的 vant4 的版本是 4.0.0-rc.6。vant 的核心开发者是@chenjiahan^[2]，一直在更新vant 。预计不久后就会发布 vant4 正式版。

暗黑主题如图所示:

暗黑主题

也可以打开官方文档链接^[3]，自行体验。

学完本文，你将学到：

1. 学会暗黑主题的原理和实现
2. 学会使用 vue-devtools 打开组件文件，并可以学会其原理
3. 学会 iframe postMessage 和 addEventListener 通信
4. 学会 ConfigProvider 组件 CSS 变量实现对主题的深度定制原理
5. 学会使用 @vue/babel-plugin-jsx 编写 jsx 组件
6. 等等

22. 准备工作

看一个开源项目，第一步应该是先看 README.md^[4] 再看贡献文档 github/CONTRIBUTING.md^[5]。

不知道大家有没有发现，很多开源项目都是英文的 README.md，即使刚开始明显是为面向中国开发者。再给定一个中文的 README.md。主要原因是因为英文是世界通用的语言。想要非中文用户参与进来，英文是必备。也就是说你开源的项目能提供英文版就提供。

2.1 克隆源码

贡献文档中有要求：You will need Node.js >= 14^[6] and pnpm^[7].

# 推荐克隆我的项目
git clone https://github.com/lxchuan12/vant-analysis
cd vant-analysis/vant

# 或者克隆官方仓库
git clone git@github.com:vant-ui/vant.git
cd vant

# Install dependencies
pnpm i

# Start development
pnpm dev

我们先来看 pnpm dev 最终执行的什么命令。

vant 项目使用的是 monorepo 结构。查看根路径下的 package.json。

2.2 pnpm dev

// vant/package.json
{
    "private": true,
    "scripts": {
        "prepare": "husky install",
        "dev": "pnpm --dir ./packages/vant dev",
  },
}

再看 packages/vant/package.json。

// vant/packages/vant/package.json
{
  "name": "vant",
  "version": "4.0.0-rc.6",
  "scripts": {
    "dev": "vant-cli dev",
  },
}

pnpm dev 最终执行的是：vant-cli dev 启动了一个服务。本文主要是讲主题切换的实现，所以我们就不深入 vant-cli dev 命令了。

执行 pnpm dev 后，命令终端输入如图所示，可以发现是使用的是目前最新版本的 vite 3.1.8。

pnpm-dev-vite

这时我们打开 http://localhost:5173/#/zh-CN/config-provider。

33. 文档网站

打开后，我们可以按 F12 和 vue-devtools 来查看vant 官方文档的结构。如果没有安装，我们可以访问vue-devtools 官网^[8]通过谷歌应用商店去安装。如果无法打开谷歌应用商店，可以通过这个极简插件链接^[9] 下载安装。