用tailwindcss适配暗黑模式竟如此简单
接着上面一篇《从Nuxt文档里发现色彩的配搭诀窍》的内容,本文是我继续对 Nuxt/Content
的探索。当我研究它的色彩系统的时候,我还发现它还提供了暗黑模式,这也算是色彩系统的一种吧,毕竟也是和色彩搭配有关。经过一番学习折腾之后发现它的暗黑模式实现非常简单,甚至不需要你对这个模式有多么深刻的理解,只需要设置几个选项就能完成,并且搭配了 tailwindcss 的 color 系统灵活性也非常的好。
本文就以 引发作者探索暗黑模式的背景 -> 暗黑模式起源以及重要性 -> tailwindcss + vue3 实践暗黑模式的思路来进行讲解。
首先我们先来通过 html 源码看看整个页面的样式变化。
从 切换到黑暗模式下的class
的内容就可以看出来,与普通模式相比会有两个变化:
1.根元素会挂载一个 dark-mode
的样式。
2.任何设置了 dark:{class}
的样式会生效。
没错,这就是 tailwindcss 内置的 dark mode,根据模式切换,能自动往根元素插入一个class,并且让 我们一开始设置的dark:{class}
生效 ,大概的原理我们懂了,就差实践了,那么在进入实践之前,先来聊聊,为什么会有暗黑模式?当前以下不仅会回答这个问题,我还会解释为什么要用暗黑模式。
起因
让我们开始吧!
在计算机诞生早期的时候,计算机的显示屏其实一直被「暗黑模式」所占据,这是因为在20世纪6080年代的计算机显示器使用的是仅能支持单色显示的阴极射线管(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>
</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
用tailwindcss适配暗黑模式竟如此简单相关推荐
- 微信7.0.10内测更新!除了适配暗黑模式,还有这些实用功能!
微信7.0.10内测更新,其实本没打算写这篇文章~ 因为,我自己在使用魅族手机,早都可以愉快地使用暗黑模式了~对于,这次更新适配暗黑模式,并没有那么兴奋! 不过,我还是第一时间下载更新体验一下,说说有 ...
- H5内嵌App适配暗黑模式
情况:项目是vue做的H5页面,需要嵌入到App中适配暗黑模式,但是H5需要有个加载的过程,就会出现一闪而过的白色(未渲染完成) 解决方法:在public/index.html中添加CSS媒体查询,代 ...
- iOS 适配暗黑模式
#import <UIKit/UIKit.h> @interface UIColor (DarkColorChange)/*** 十六进制字符串** @param color 16进制色值 ...
- iOS 13适配——暗黑模式
暗黑模式介绍 Implementing Dark Mode on iOS How To Adopt Dark Mode In Your iOS App Adopting iOS Dark Mode S ...
- iOS微信7.0.12发布!除了适配暗黑模式,还有这些新功能!
前几天,"微信不适配深色模式就会被下架"的消息闹得沸沸扬扬~最后,腾讯微信团队官宣"与苹果达成合作,共同探索微信在iOS系统的暗黑模式体验,有望在下一个版本中上线!&qu ...
- ios适配暗黑模式-图片、颜色
一.适配Dark mode:颜色适配.图片适配 其实适配Dark模式,开发者主要从颜色和图片两个方面进行适配,我们不需要关心切换模式时改如何操作,这些都是系统帮我们实现,我们只需要做好适应两套模式的资 ...
- Android 适配暗黑模式
在样式中添加 <style name="MyAppTheme">.......<item name="android:forceDarkAllowed& ...
- iOS制作暗黑模式教程
0.前言 随着iOS13的普及,大多数的APP都已经适配了暗黑模式,网络上关于暗黑模式适配的文章也很多,基本看几篇就能解决掉iOS13暗黑模式的适配.我看了大部分的文章,基本都是对暗黑模式通用的介绍和 ...
- Android App Dark Theme(暗黑模式)适配指南
在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式,并提供相关 AP ...
最新文章
- print python 如何加锁_Python 进阶(一):多线程
- Markdown与 $\LaTeX$ 公式的使用入门指南
- RNN的手写数字识别
- python之scrapy爬取jd和qq招聘信息
- 函数式编程 -- 函数是一等公民、高阶函数、闭包
- 计算机2020中级考试题,突发!2020年中级考试分值及评分标准大变!
- Linux从某个字符串处换行,Windows和Linux中任意字符串替换成换行符的问题
- 小程序nginx做反向代理_NGINX作为节点或Angular应用程序的反向代理
- 数据库设计时设计标识字段的一些思考
- win7设置固定IP重启后无法上网,ipconfig显示为自动配置IPV4 169.254的地址
- 使用poi导出excel,及合并单元格边框显示问题
- 操作系统春招面试复习之:文件管理
- 【新示例】阿里系行业SaaS,企加云要做IOE的赋能者
- java 手动内存回收_java内存与回收调优
- k8s资源之service
- 运用计算机通过动力方程,计算机技术在地下水动力学课程素材建设中的应用
- 专接本计算机与科学技术,计算机科学与技术专业专接本考什么
- seetaface6 android jni(二)
- 自助游最佳时间去最佳地方
- OSChina 周日乱弹 —— 感觉他俩长相挺门当户对的