前端深色模式完整指南

# 前言

深色模式近来获得了很多关注，苹果公司，已经将深色模式运用到了IOS、IPadOS和MacOS系统上，Windows和Google也在实践深色模式，国内像开源的前端库 Ant Design (opens new window)，Ant Design Pro (opens new window)，也都提供了主题功能。在前端领域，深色模式的使用也开始兴起，比如像博客站点(本站就提供了深色模式，可通过右下角按钮切换体验)，深色模式在前端上的实践给web应用带来了丰富多彩的体验，基于这种切换模式的功能，我们可以实现一整套完整的皮肤系统，这非常令人期待。

看来是时候将深色模式运用到我们的web应用中了。接下来，我们将会研究深色模式设计实现的不同方案，以及这些方案所涉及的技术要点，在这一过程中，我们还会学习到一些设计技巧。

# 内容概要

# 1. 主题切换

# 2. 操作系统中的深色模式

# 3. 存储用户的选择

# 4. 处理浏览器用户代理样式

# 5. 组合方法

# 6. 设计注意事项

# 7. 深色模式的现状

# 8. 你是否需要深色模式

# 主题切换

主题切换的常见场景是，web应用已经存在一个默认的浅色的主题，而我们还需要制作一个深色主题。或者，从一开始开发的时候，我们就需要制作两个主题：浅色和深色。大多数情况下，我们将浅色主题设置为默认主题（虽然我们可以将web应用的默认主题显示跟浏览器的保持一致），当用户访问web应用时，显示的是默认主题，随后，还应该提供一种方法可以切换到其他主题，例如，用户点击切换主题的按钮来切换不同的主题。

目前的实现方案主要有以下几种：

body class

该方案的主要实现原理是动态切换class，从而改变页面上相应元素的样式。

<body class="dark-theme || light-theme"></body>

例如：通过点击按钮，触发按钮的点击事件，来切换class，

// 获取button dom节点
const btn = document.querySelector('.btn-toggle')

// 给button设置点击事件回调函数
btn.addEventListener('click', function () {
  // 点击按钮时，body标签动态删除或添加 'dark-theme' class
  document.body.classList.toggle('dark-theme')
})

html：

<body>
  <button class="btn-toggle">切换主题</button>
  <h1>这是一个标题</h1>
  <p>演示文本</p>
  <p>另一个演示文本</p>
  <a href="#">链接文本</a>
</body>

单独的样式文件

自定义属性

服务端脚本*

...

#前端 #暗黑模式 #深色模式 #css