接着上面一篇《从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
# 安装依赖
npm install
# 安装 tailwind 依赖
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# tailwind 配置初始化
npx tailwindcss init -p
初始化后，会自动在目录下创建两个文件，
tailwind.config.js
和
postcss.config.js
，这个时候我们的文件目录呈现以下的样子。
./
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│ └── favicon.ico
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ └── main.js
├── tailwind.config.js
└── vite.config.js
然后为了能够使用 tailwindcss ，我们还需要引入他的一些工具包。我们通过在src目录下创建一个 index.css 来引入它的工具包。
# 创建 tailwindcss
touch src/index.css
修改我们的 css 文件，引入工具包：
// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
然后在入口文件 main.js 引入这个css文件。
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
至此我们的 vite + vue3 + tailwindcss 的工程已经初始化好了，接下来就是需要配置 tailwindcss 的暗黑模式了。
一共需要两个步骤，第一步是选择使用的模式，第二步是为了能方便写适配暗黑模式的代码，例如
dark:{class}
。
第一步
打开
tailwind.config.js
文件，我们来修改最外层的
darkMode
属性，它有两个选项
media
和
class
：
-
media
是通过媒体监测实时监测用户操作系统上是否启用了暗模式。
-
class
更偏向于手动，例如在站点提供选项或按钮来切换light和dark模式。
在这里我们使用
class模式
来实现我们的暗黑模式。
...
darkMode: "class"
...
第二步
在 tailwindcss 中如果需要支持暗黑模式，还需要在 variants 中增加配置，例如以下我们让背景色和文字颜色支持了暗黑模式。
继续编写
tailwind.config.js
， 增加
variants
，这一步主要是增加了一些能让你快速书写暗黑模式的
class
代码，例如，
dark:text-gray-300
，意思就是在暗黑模式下，让文字呈现灰度为 300 的颜色。关于这个数值，可以看我上一篇文章《从Nuxt文档里发现色彩的配搭诀窍》，这是 tailwindcss 的一套主题色值，数值越小，代表颜色越来越浅，越接近白色，色值越大代表颜色越深，越接近白色。因此我们需要在暗黑模式下选择一个颜色较浅的色彩值。暗黑模式下一共有以下几个属性可以配置成快速书写的方式，
backgroundColor
,
borderColor
,
gradientColorStops
,
placeholderColor
和
textColor
。那为什么要配置这一步呢？其实主要和代码量有关，配置多个属性势必会引入更多的css类，如果你的暗黑模式无使用到所有的类，那么只需要适量引入。
// tailwind.config.js
module.exports = {
variants: {
extend: {
textOpacity: ['dark'],
backgroundColor: ['dark'],
}
然后再增加一个支持暗黑模式的插件
tailwindcss-dark-mode
const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')
const selectorParser = require('postcss-selector-parser')
module.exports = {
// purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: "class", // or 'media' or 'class'
theme: {
colors,
extend: {},
variants: {
extend: {
backgroundColor: ['dark'],
textColor: ['dark'],
plugins: [
require('tailwindcss-dark-mode')()
}
然后我们在 App.vue 中写入我们的控制主题代码
<div class="text-gray-700 dark:text-gray-300 dark:bg-gray-900 w-full h-full">
<button @click="lightMode" class="border-2 p-1 m-1">普通模式</button>
<button @click="darkMode" class="border-2 p-1 m-1">暗黑模式</button>
<div class="p-1">
<h1 class="text-2xl">我是H1</h1>
<h2 class="text-xl">我是H2</h2>
<h3 class="text-lg">我是H3</h3>
<h4 class="">我是H4</h4>
</div>
当我们处于暗黑模式的时候，我们将字体的颜色改成了
text-gray-300
，并且将背景色改成了
bg-gray-900
，查看一下效果：
以上代码可以在
https://github.com/hua1995116/dark-mode
获取。、
总结
其实我们发现通过这种方式来写暗黑模式，非常的简单，只需要在一些关键的元素前面添加 dark 就能轻松适配暗黑模式，不再需要想一个类名，并且在媒体查询中写下我们对应的代码，整体的流程都变得简单的。
感谢
以上我们通过了 探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路向大家讲解了如何用 tailwindcss 适配 暗黑模式，最初的起源只是因为想找到一个文档站点，因此找到了
nuxt/content
，后来慢慢去探索它其中闪光点，也告诉了我们一个道理，当我们在使用一些优秀项目的时候，如果我们稍加细心，只要再往内部探索一些，就能学习到非常多有价值的知识。在使用和探索中学习，岂不快哉~
参考文章
http://www.199it.com/archives/1010486.html
https://finance.sina.com.cn/tech/2021-05-06/doc-ikmxzfmm0820987.shtml
https://www.uisdc.com/dark-mode-history
https://trends.google.com/trends/explore?date=all&geo=HK&q=Dark%20Mode
https://tailwindcss.com/docs/dark-mode
