前端深色模式完整指南
# 前言
深色模式近来获得了很多关注,苹果公司,已经将深色模式运用到了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>
单独的样式文件
自定义属性
服务端脚本*
...