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 实现两种模式切换。
相关推荐
Aotman_2 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6142 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf2 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育3 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9493 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld3 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu3 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子3 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖3 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome
qq_12498707534 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计