前言
大家好，作者又来了，距离上一次出现过了将近一个月的时间了，十分想念大家。
自上一篇文章 自己的开源项目被尤雨溪祖师爷写进演讲稿是一种什么体验 投稿开始，作者有幸认识了特别特别多有意向对Varlet进行贡献的同学，大家都是很好的人，在这里先谢过大家的支持。
作者也非常惭愧，蹭了一下尤大的热度上了掘金月榜，收到了掘金社区送到礼物。虽然受之有愧但是还是心怀感激，谢谢社区鼓励。
同时又不禁感叹祖师爷的号召力果然是非同凡响。有了这么多社区热心同学的帮助，作者决定动手实现所有组件的暗黑模式适配，第一方提供暗黑模式的主题，从而获得更好的用户体验，现在已经全部做完了，内部开放了一周时间测试，release了，效果还不错。这篇文章也算是一个总结吧。
组件库相关
开源免费且自由，支持Varlet的方式大体有以下三种
- 给
Varlet发pr，代码贡献，觉得哪里不好改哪里，帮助组件库不断进化 - 给
Varlet点star，登录你的github账号点个星星，证明你认为作者花费的心血是值得的 - 夸作者家的猫好看，猫的照片在这里，swipe组件案例里的猫咪
Varlet组件库Github仓库地址
Varlet中文文档地址
Varlet英文文档地址
什么是暗黑模式
在我们翻阅一些网页的时候，白色的主色调会让人觉得刺眼，尤其是在夜晚的时候，这时候暗黑模式就有作用了。它可以大大的增加可读性，减轻眼睛的疲劳感。并且暗色的主题总感觉会有一种很高端的感觉，比如作者的开发工具的主题选择总是会偏爱暗色，扯远了，看效果。
天亮了
天黑了
以前关注过Varlet的用户也许发现了，我们的logo在颜色上也做了一定的优化，在暗黑模式上也显得更加的自然。
接入暗黑模式
在Varlet中，你只需要调用一个函数就可以把所有组件切换成暗黑模式。 然后给body注入组件库推荐的色值变量，并且加上过渡效果，这样你的应用就会变得十分的和谐。
import dark from '@varlet/ui/es/themes/dark'
import { StyleProvider } from '@varlet/ui'
StyleProvider(dark)
复制代码body {
color: var(--color-text);
background-color: var(--color-body);
transition: background-color .25s;
}
复制代码Varlet Cli组件库开发工具链升级
不熟悉Varlet Cli的同学可以看这篇文章
这次我们的Cli也同样接入了暗黑模式，现在通过Varlet Cli生成的组件库项目自带了暗黑模式， 哪个前端开发者不希望有一套自己的组件库对不对？最好还有新皮肤～
暗黑模式总结
上面这些东西是不是看起来还凑合？这次暗黑模式的适配工作也是参与人数最多的一次，并且还是UI层面的工作，这里就面临一个贡献代码审核的问题了。
作者每个组件都要一一去审查修改，但是作者在合并代码之前并不知道贡献者提供的代码运行效果是什么，这个时候就需要用到surge服务来解决这个问题，下面顺便介绍一下它。
pr在线预览方案
Surge服务
Surge是专门为web应用程序发布而生的。
简单来说，安装了Surge的命令行你就可以发布任何文件到Surge的cdn上，并且会为你的应用分配独立的域名。
虽然访问速度慢了点，但是免费，免费，免费，重要的事情说三遍。对于开源项目的代码审查和效果预览来说，完全够用了。
通过和Github Actions结合自动部署pr的代码
Github Actions是Github为我们提供的免费流水线服务，这里就不重复造轮子了，直接调用一下阮一峰老师的文章
我们可以监听actions 的 pr的事件，把提交的代码在流水线上进行构建，再调用Surge的命令行进行部署，这样作者就可以在不合并代码的前提下，看到提交者的代码执行效果了。效果如下
点击成功提示的图片就可以看到效果预览了，这一套流程实现难度也不大，想知道怎么完成这一套流程的同学可以直接去抄仓库里.git/workflows下面的配置文件，抄过来改吧改吧也就能用了，重要的是思路。
第一步是构建过程，不同项目的构建可能或多或少有些区别。这里关键点在于构建完文档站点之后，要访问当前提交者的pr编号，将它临时存在一个文件里，这里是pr.txt，并且将文档站点和pr编号文件上传保存，以供下一个workflow使用
第二步就是部署过程了，先让脚本发一条回复给贡献者，然后把文档站点和pr编号下载下来，调用surge服务进行部署，部署成功就给贡献者发一个成功的图片，并且附上部署地址。失败也提示一下用户，当然作者希望永远别有失败的时候
新增space组件
也是机缘巧合的机会，群里一个比较和善的同学自告奋勇的给我们pr了这个组件。作者一开始非常不屑，觉得这个组件非常没有必要，因为我们已经有row & col了，而且作者是一个非常不喜欢"硬凑"组件数量的人。但是后来因为它的功能性还是真香了。
它的主要功能也比较简单，就是给它包裹的children加一个合适的间距，并且是一个可操作的flex盒子，但是在实际开发中这种场景实在太多了。
作者经过几天的使用，感觉这个组件实在太适合移动端了，基本上靠着各种<var-space>就能实现绝大多数的布局需求，真得劲儿～
结束语
希望这次新的特性可以帮到大家吧，我们内部也在不断的进化和调整。
比如给我们贡献space组件的同学已经着手开始计划varlet-pro的开发了，可能会贴近一些具体业务去做一些模板和业务组件之类的，有兴趣的同学可以去帮帮他。
又比如我们的核心维护人员也有所增加，这对我们来说是非常好的事情，这代表着我们有更多的精力去挖掘其他的可能。
又比如我们在积极的拥抱nuxt3, 虽然它看起来还不是很完善。
有什么故事，咱下回再接着聊，感谢各位的支持和鼓励，各位同学，下回见～～～