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

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

近几年,各个主流操作系统都逐渐开端注重深色方式,从而改善用户在环境光亮低时的阅读体验。很多手机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

相关推荐

  • 高播放量视频怎么做?如何提高广告视频播放量?

    核心方法论就是:3秒完播率+高转化率素材 抖音就是一个视频内容分发平台,视频的3秒完播率数据越高,越有可能被更多用户看到。 从广告优化的思维来考虑,尽可能发掘能够吸引用户注意力的素…

    2022年3月16日
  • 运营17年后QQ堂今日正式停服!

    运营17年后QQ堂今日正式停服! 今日消息,腾讯旗下休闲娱乐游戏《QQ堂》将正式停止中国大陆地区的运营。这款游戏将于今日11点关闭服务器,届时玩家将不能正常登录游戏。同时,游戏服务…

    2022年4月21日
  • 马斯克成推特最大股东

    马斯克成推特最大股东 北京时间4月5日晚间消息,据报道,Twitter CEO帕拉格·阿格拉瓦尔(Parag Agrawal)今日表示,Twitter将任命特斯拉CEO埃隆·马斯克…

    2022年4月7日
  • .xyz域名的价值评估及建站情况

    .xyz域名的价值评估及建站情况 据了解,自2014年.xyz域名正式开放注册以来,.xyz域名就颇受全球企业终端以及投资人的关注,无论是在域名的注册量还是在域名交易市场上的活力,…

    2022年4月26日
  • 马斯克:已将大脑上传云端,并与之交谈

    马斯克:已将大脑上传云端,并与之交谈 日前,特斯拉CEO埃隆·马斯克在推特上回答狗狗币联合创始人比利·马库斯的问题时表示,自己已经将大脑上传至云端,并且已经与自己的虚拟版本交谈过。…

    2022年7月20日
  • 推特正式起诉马斯克

    推特正式起诉马斯克 当地时间12日,推特公司正式起诉特斯拉公司首席执行官埃隆·马斯克,要求他以440亿美元的价格收购这家社交媒体公司。 根据法庭文件,推特指控马斯克违反收购合同这一…

    2022年7月14日
  • .store域名代表什么?选择.store域名有什么优势?

    .store域名代表什么?选择.store域名有什么优势? 据了解,自Radix注册局2016年6月开放注册以来,store域名逐渐成为电子商务领域炙手可热的新顶级域名后缀之一,全…

    2022年6月14日
  • 【运营知识】内容运营常见的3个问题

    先跟大家说几句题外话,由于负责的产品进入了批量生产阶段(MP),笔者这段时间都处在产品一线,未来几个月还要做几款新产品的调研和导入,空闲时间有限,内容更新频率会降至1-2篇/月。 …

    2022年3月7日
  • 竞价关键词该如何整理分类?

    竞价关键词该如何整理分类? 建议从用户对产品的需求程度进行划分: ①品牌需求 对产品品牌有一定的了解或者有看过相关品牌想趁机了解品牌相关信息的,这类关键词包含企业产品词及企业品牌词…

    2022年4月7日
  • 新网站如何做SEO?新网站SEO需要做什么?新网站SEO优化步骤介绍

    新网站如何做SEO?新网站SEO需要做什么?新网站SEO优化步骤介绍 虽然现在都2022年了,但新入场玩网站的朋友还是有非常多,尤其是一些创业的、运营岗位新入职的SEOer 尽管摆…

    2022年3月31日