Day 18 - Dark Mode 使用

今天是连假第一天，返乡的看官们都平安吧！前几天苹果发表了 New iPhone，售价降低了，加上今年又有五倍券，虽然没啥新意，且威尔猪自己的还头好壮壮，但折扣下来的价格跟往常比还是好诱人啊，各位看官们会想买 iPhone 13 (pro) 吗？

深色模式

自从苹果推出深色主题後，就受到不少众人喜爱，威尔猪自己也是在深色主题下工作的，既能让耗电量减少，也能增加萤幕寿命，更能让长期在电脑面前的工作者们，降低视觉疲劳。所以现在不管是桌机还手机，深色主题是很多系统的主要功能，设计一个深色版的网站也变得越来越普遍。

身为现代 CSS 框架之一的 Tailwind，当然也具备这项能力，不过出於文件大小的考虑，在默认情况下，Tailwind 是没有开启深色模式的。威尔猪就来教你，如何使用隐藏版深色模式， Let's Go～

首先，开起深色模式有两种方式，完全取决於当初专案设计时是要让使用者 自动切换 还是 手动切换。

自动切换

先来说说自动切换吧，没听错，就是自动。什麽是自动切换呢？就是跟随使用者预设的系统主题。像威尔猪使用的 macOS 和 iOS，分为浅色和深色，当使用者将系统更改为深色主题时，Tailwind 就会自动将你开发的网页转为深色模式；亦或是系统启用自动，在太阳下山时，系统就会自动转变为深色主题。也就是白天开启网站为浅色配置，晚上开起同一网站就变为深色配置了。那 Tailwind 该如何启用自动配置：

首先在 tailwind.config.js 中把 darkMode 设置为 media，如下：

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'media',
  ...
}

没错，这样就启动深色模式了。media 就是在底层使用了 CSS 的 prefers-color-scheme 来监测浅色或深色主题。现在，只要使用者的操作系统开启了深色主题，那 Tailwind 编写的网页就会转为深色模式了。

macOS 自带主题
https://ithelp.ithome.com.tw/upload/images/20210918/20141250GAO1PTD3NR.png

不过还没结束，我们要让 Tailwind 知道转为深色模式时要用什麽配色，使用方式为 dark:{class}。看以下范例：

<html>
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">自动深色模式</h1>
    </div>
  </body>
</html>

在默认情况下，深色模式只对 backgroundColor、borderColor、gradientColorStops、placeholderColor 和 textColor 起作用，目前对威尔猪来说够用了，不需再额外添加。

手动切换

顾名思义，让使用者想自由切换为深色模式或是浅色模式，通常会使用到 JavaScript 来完成触发条件。如果要支持手动切换为深色模式，则将 media 替换为 class。范例如下：

// tailwind.config.js

module.exports = {
  ...
  darkMode: 'class',
  ...
}

这样，深色模式将不再根据 prefers-color-scheme 起作用，而是当在 HTML DOM 元素中指定 Class 为 dark 时才启用。看以下范例：

<html class="dark">
  <body>
    <div class="h-screen p-4 bg-white dark:bg-gray-900">
      <h1 class="text-5xl text-gray-900 dark:text-white">手动深色模式</h1>
    </div>
  </body>
</html>

至於如何将 dark 添加到 HTML DOM元素中取决於当初专案的决定，但是常见的方式是使用 JavaScript （如：localStorage）来读取，并更新相对应的颜色。

威尔猪做了一个手动版小范例，可以查看 DEMO。

最後特别要注意，如果有响应式跟状态串接时，必须把 RWD 放在最前面，然後是 dark，最後才是状态。例如：md:dark:hover:bg-blue-300。

以上就是今天的内容，深色模式是不是很酷，虽然是中秋假期，但咱们还是明天见。See you ~


<<:  [Day18] JavaScript - Fetch

>>:  Day18 测试写起乃 - Cucumber 前置作业

Python 演算法 Day 13 - Ensemble Learning

Chap.II Machine Learning 机器学习 https://yourfreetemp...

10 - BAT - 使用高亮预览文件

cat 指令可以预览文件的内容，是个简单好用的指令，但是它不会对不同的档案类型提供语法高亮的预览，因...

[Python 爬虫这样学，一定是大拇指拉！] DAY29 - 实战演练：自制进度条 Progress Bar

自制 Progress Bar 继前一篇，来补充自制一个小功能，让这个程序会好用一些些。 爬虫在爬的...

VR的3D是伪3D

突然刷到李老师的影片，是2018年的，3年前的影片 让我来了解一下！ ... 　 　 　 这个立体感...

多工的陷阱

前言 今天来聊一个看起来不浪费的浪费。 多工会怎样 在我们的成长过程中，应该不只一次会听到前辈们的告...