CSS 轻松实现“日间模式”和“夜间模式”

夜间模式

作为熬夜专业户,常常会在深夜刷手机。当长时间使用没有【夜间模式】的 APP时,总会感觉到眼睛酸痛。微信就是没有【夜间模式】的代表之一。按照微信的说法:你的夜晚太珍贵,我们不忍心占用,更不愿意成为你半夜醒来看手机的原因。愿你每夜好眠。

对于资深打工人而言,深夜确实太珍贵了!我只有深夜才能放松刷会手机😭。长时间使用亮色系的 APP 是不能接受的。经过一番查阅,iOS 中只需将手机设置为深色模式就可以实现微信的【夜间模式】。

✿✿ヽ(°▽°)ノ✿

那问题来了,作为一名前端,我们是否也可以为用户提供自适应的夜间模式

color-scheme

color-scheme CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。 操作系统颜色方案的常见选择为"亮色"和"暗色",或"日间模式"和"夜间模式"。当用户选择其中一种颜色方案时,操作系统会对用户界面进行调整,包括表单控件、滚动条和 CSS 系统颜色的使用值。

属性介绍

属性 含义
normal 表示元素未指定任何配色方案,因此应使用浏览器的默认配色方案呈现
light 表示可以使用操作系统亮色配色方案渲染元素
dark 表示可以使用操作系统深色配色方案渲染元素
dark 禁止用户代理覆盖元素的颜色方案。

当没有特殊设置时,color-scheme 会响应系统当前的颜色模式。接下来我们就看看几种实现【夜间模式】的方案吧!

方式1:通过浏览器的适配色方案实现【亮色】与【暗色】切换

通过通过系统颜色 Canvas 与 CanvasText 来自适应响应深夜模式

css 复制代码
:root {
  color: CanvasText;
  background-color: Canvas;
}

默认情况下,CanvasText 会生成接近 black 的颜色,而 Canvas 是接近 white 的颜色。实际实现取决于浏览器。

这种方案适合于简单的色系替换,当场景复杂且有色值要求时,该方案不大适合。

方式2:通过媒体查询实现主题切换

@media (prefers-color-scheme: dark)@media (prefers-color-scheme: light) 来实现两种模式切换。 通过查询的当前采用的模式,来设置不同的颜色。

css 复制代码
body {
  background-color: #fff;
  color: #000
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}

该方案灵活性高,但代码量偏大。这里我们可以配合 css 变量来优化一下:

css 复制代码
:root {
    --text-color: #000;
    --bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #fff;
        --bg-color: #000;
    }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color)
}

通过 css 变量与媒体查询,实现在不同模式下响应不同的主题。

方式3:使用 light-dark 实现主题切换

light-dark() 是接受两个参数的函数,且这两个参数都必须为 <color>。系统会根据使用的配色方案选择其中一种。

  • 如果所用配色方案为 light 或未知,则返回第一个值的计算值。
  • 如果使用的配色方案为 dark,则返回第二种颜色的计算值。

light-dark 的实现方式可以将方案 2 的方式得到简化

css 复制代码
body {
  background-color: light-dark(#fff, #000);
  color: light-dark(#fff, #000);
}

需要注意的是,light-dark()目前属于比较新的属性,存在一定的兼容性

总结

实现"日间模式"和"夜间模式"的三种方式

  1. 通过系统配色方案试下:Canvas 与 CanvasText
  2. 采用 prefers-color-scheme 媒体查询,根据响应实现不同色系。
  3. 使用 light-dark 实现两种模式切换。
相关推荐
脑袋大大的10 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0120 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆2 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui