手机网页自适应深色模式适配

手机网页自适应深色模式适配

近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对深色模式进行了支持,常用的手机应用也在 App Store 的政策压力下对深色模式进行了适配。那么,对于手机网站来说,是否也能支持自适应浅色模式和深色模式,本文将介绍一下手机网页如何开发自适应深色模式适配。

既然有了系统层级的适配,手机网站的页面就可以读取深色方式开关,从而完成网页的自顺应。CSS推出的 prefers-color-scheme 的 media 选择器,使得网页能够适配深色模式和浅色模式。

什么是prefers-color-scheme?

2020年7月31日,W3C发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme,网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说,现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的,亮色模式系统访问的页面是亮色的”。

prefers-color-scheme提供了两个值;分别是 light 以及 night;顾名思义,light就是白天模式的样式代码,则night是深色模式的样式代码。

light——浏览器系统使用亮色主题的界面,同时也是默认值,浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值。

dark——浏览器系统使用暗色主题的界面。

CSS语法

@media (prefers-color-scheme: ) {

}

其中 mode 有如下可能的取值:

light:浅色模式

dark:深色模式

CSS样式代码

@media (prefers-color-scheme: light) {

// 亮色模式样式

}

@media (prefers-color-scheme: dark) {

// 深色模式样式

}

CSS变量

除了prefers-color-scheme,我们还要了解CSS变量的功能和用法。

CSS 变量(CSS variable)又叫做“CSS 自定义属性”(CSS custom properties)。

变量的声明使用变量名前面要加两根连词线–,变量名大小写敏感。var()函数用于读取变量。var()函数还可以使用第二个参数,表示变量的默认值。如果该变量不存在,就会使用这个默认值。

改造现有的网页

有了这个功能,我们就可以着力改造现有的网页。我们在CSS里将主题颜色使用CSS变量来表示,我们需要定义两组变量,一套深色,一套浅色,使用如下的代码进行处理。

:root {

–bg: #FFFFFF;

–textColor: #000000;

–borderColor: #2C2C3A;

}

@media (prefers-color-scheme: dark) {

:root {

–bg: #000000;

–textColor: #FFFFFF;

–borderColor: #2C2C3A;

}

}

这样,当有人使用手机的深色模式系统主题时候,访问网站的时候,将会自动切换到深色模式。

只使用 CSS 条件规则很难实现某些需求,我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态:

if (window.matchMedia(‘prefers-color-scheme: dark’).matches) {

// 是暗色模式做什么

} else {

// 非暗色模式做什么

}

通过上面的改造,就可以实现手机端深色和浅色模式的自适应切换。

文章为作者独立观点,不代表站长派立场,本文链接:https://zhanzhangpai.com/?p=3347

免责声明:本站部分内容来源互联网整理,如有侵权请联系站长删除。站长邮箱:1245911050@qq.com

(0)
上一篇 2022年8月17日 上午9:51
下一篇 2022年9月5日 上午10:46

相关推荐

  • DNS缓存怎么清理?清理DNS缓存有什么用?

    DNS缓存怎么清理?清理DNS缓存有什么用? 有dns的地方就有缓存,浏览器、操作系统、Local DNS、根域名服务器,它们都会对DNS结果做一定程度的缓存。因此你知道DNS缓存…

    2022年5月30日
  • Google“有用内容更新”观察及应对

    作者:Zac 更新日期: 2022年09月21日 今天突然觉得应该写一下Google前些天刚上线的“有用内容更新”,因为感觉这个更新尤其清晰地显示着Google这两年的算法发展方向…

    2022年12月6日
  • 那个怒怼腾讯管理层的应届生离职,且被人事部门标注“永不录用“

    这位小哥终于为自己的“年少无知”付出了代价。而且,除了腾讯以外,这个应届生去任何互联网大厂都会被拒绝。事情是这样的: 1月25日晚,腾讯企业微信的一名应届生员工在部门内部大群中,因…

    2022年2月9日
  • 二级域名买卖的风险知识

    二级域名买卖的风险知识 二级域名可以出售吗?二级域名买卖有什么风险?想要知道二级域名买卖有没有风险?首先要理解什么二级域名,所谓二级域名是互联网DNS等级之中处于顶级域名之下的域名…

    2022年7月6日
  • 什么是dns服务器?

    什么是dns服务器? 什么是dns服务器?dns服务器即域名系统,域名系统为Internet上的主机分配域名地址和IP地址。用户使用域名地址,该系统就会自动把域名地址转为IP地址。…

    2022年7月7日
  • 免费动态域名申请

    免费动态域名怎么申请?什么是动态域名?动态域名可以做什么?动态域名有什么作用?下面是上述关于动态域名的问题解答。 1、什么是动态域名? 动态域名可以将任意变换的IP地址绑定给一个固…

    2022年10月26日
  • 苹果一旦退出中国,会怎么样?

    苹果一旦退出中国,郭台铭坦言,难以想象! 苹果退出中国,无疑损失最大的是苹果公司!连续两月夺冠!苹果iPhone在华市场份额升至23.6%! 其次,损失最大的应该是富士康!富士康是…

    2022年1月17日
  • 什么是海外域名?海外域名有哪些?

    海外域名去哪找?由于国内一些用户喜欢使用海外域名,下面就为大家介绍下海外域名。 首先海外域名就是除中国大陆以外的其他国别域名或地区顶级域名。海外域名形如: uk、jp.de、tw、…

    2022年12月8日
  • 赛门铁克ssl证书怎么样?如何申请赛门铁克ssl证书?

    什么是赛门铁克ssl证书?赛门铁克ssl证书好吗?赛门铁克ssl证书申请流量是什么样?以下是有关赛门铁克ssl证书的知识介绍。 1、赛门铁克ssl证书怎么样? 据了解,赛门铁克是目…

    2022年3月22日
  • 利用小米换新政策骗取全新手机被刑拘

    利用小米换新政策骗取全新手机被刑拘 4月24日消息,河北省正定县公安局官方微博近日公布了一起利用手机换新政策实施诈骗的犯罪,抓获涉案人员5人。 据公告,2022年4月初,正定县公安…

    2022年4月26日