用tailwindcss适配暗黑模式竟如此简单

接着上面一篇《从Nuxt文档里发现色彩的配搭诀窍》的内容，本文是我继续对 Nuxt/Content 的探索。当我研究它的色彩系统的时候，我还发现它还提供了暗黑模式，这也算是色彩系统的一种吧，毕竟也是和色彩搭配有关。经过一番学习折腾之后发现它的暗黑模式实现非常简单，甚至不需要你对这个模式有多么深刻的理解，只需要设置几个选项就能完成，并且搭配了 tailwindcss 的 color 系统灵活性也非常的好。

本文就以 引发作者探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路来进行讲解。

首先我们先来通过 html 源码看看整个页面的样式变化。

从 切换到黑暗模式下的class 的内容就可以看出来，与普通模式相比会有两个变化：

1.根元素会挂载一个 dark-mode 的样式。

2.任何设置了 dark:{class} 的样式会生效。

没错，这就是 tailwindcss 内置的 dark mode，根据模式切换，能自动往根元素插入一个class，并且让 我们一开始设置的dark:{class}生效 ，大概的原理我们懂了，就差实践了，那么在进入实践之前，先来聊聊，为什么会有暗黑模式？当前以下不仅会回答这个问题，我还会解释为什么要用暗黑模式。

起因

让我们开始吧！

在计算机诞生早期的时候，计算机的显示屏其实一直被「暗黑模式」所占据，这是因为在20世纪60_{80年代的计算机显示器使用的是仅能支持单色显示的阴极射线管（CRT），黑底绿字的展示方式就成为了当时的常态。（原来这是一直延续的传统}）

即使是80年代之后，彩色CRT显示器逐渐流行普及，但当时主流的DOS并没有什么「图形界面」的概念，依然延续了先前黑底的习惯。直到1984年，苹果发布了个人计算机Macintosh，普及了图形用户界面（Graphic User Interface）的概念，从而开启了以白色为底色的图形交互时代。

直到2019年10月， IOS 13 这一支持暗黑模式系统的发布，「Dark Mode」的热度达到了空前的顶峰。

然后各大互联网APP进行适配「暗黑模式」，可以从下图看出来~（图来自优设），其实我们也有感受，自从那以后周围很多人的屏幕都变成了暗黑的主题。到这里为止我们阐述了为什么有暗黑模式这个问题，其实一直都有，只不过自从苹果发布了之后，得到了大家的广泛关注。

再来看看近几年的《移动互联网行业分析报告》分析中，可以看出，越来越多的人选择在夜间/较为昏暗的场景下使用手机。

许多视频APP的高峰使用时段大部分处于 20:00 到 22:00 ，并且像快手、抖音短视频APP的兴起也使得大家普遍晚睡了。因此夜间场景使用增长了大家对「暗黑模式」的需求，因此各大厂商为了吸引人们使用产品的欲望，自然要适配暗黑模式。这一模式不仅能够让我们不再眼瞎，并且能够带来视觉沉浸感。

下面我们回归到我们的正题，通过一个新的项目来讲解 **tailwindcss 适配「暗黑模式」**这一过程。

实践

本次实践，我采用 vue3 创建的 demo 作为例子。(其他框架也是类似，只需要配置对应的 loader)

我们就直接通过 tailwindcss 官网提供的 vue3 + vite 的命令来新建项目（https://tailwindcss.com/docs/guides/vue-3-vite）

# 创建项目
npm init vite my-project
cd my-project
# 安装依赖