web tricks
首页
前端
CSS
ChickenHouse (opens new window)
首页
前端
CSS
ChickenHouse (opens new window)
  • CSS
  • Dark Mode
2020-12-02

前端深色模式完整指南

# 前言

深色模式近来获得了很多关注,苹果公司,已经将深色模式运用到了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
最近更新
01
CSS 动画库推荐
05-07
02
Pinia,一个更简洁的 Vuejs 状态管理工具
03-30
03
reative 和 ref
03-30
更多文章>
Copyright © 2020-2022 konnga.cn
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式