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

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

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

相关推荐

  • 远程办公工具FirstbaseB轮融资5000万美元

    远程办公工具FirstbaseB轮融资5000万美元 据报道,主打远程办公工具的初创公司Firstbase近期宣布获得5000万美元的B轮融资,由Kleiner Perkins领投…

    2022年3月30日
  • 用ip反查域名的操作方法介绍

    用ip反查域名的操作方法介绍 通过ip地址怎么查询到域名的信息,此前小聚为大家介绍过什么是ip反查域名,ip反查域名的工具,下面带大家了解下用ip反查域名的一些操作方法。 1、已知…

    2022年6月6日
  • 年轻人应该选择什么样的工作?

    近日,有两则新闻放在一起看看很有意思,一则新闻是“腾讯应届生因加班在大群怒怼管理层”,一则新闻是“七成的清北毕业生选择进入体制内工作”。 对于“腾讯应届生因加班在大群怒怼管理层”这…

    2022年1月30日
  • 你发的短视频都是垃圾?2022年如何做好短视频和直播

    最近很长一段时间没有继续更新短视频,一直有朋友问我,怎么了,为什么不更新短视频了,要坚强。当然,并不是我已经放弃做短视频和直播,而是在思考下一步怎么样做好短视频和直播。 2022年…

    2022年2月16日
  • 近一年基础网站流量数据统计

    一、流量来源占比 搜索引擎:60%直接访问:29%外部链接:11% 二、搜索引擎来源占比 百度:90%谷歌:7%搜狗:1.5%神马:不到1%360:不到1%必应:不到1%头条:不到…

    2023年1月17日
  • 马斯克指责Twitter不提供虚假账号信息

    马斯克指责Twitter不提供虚假账号信息 北京时间6月6日晚间消息,据报道,特斯拉CEO埃隆·马斯克(Elon Musk)今日致信Twitter,指责Twitter“抵制和阻挠”…

    2022年6月7日
  • 域名反查和whois反查是什么意思?

    域名反查和whois反查是什么意思? 什么是域名反查?域名反查是什么意思?相信很多人都有过这样的经验,在浏览器搜索域名反查却出现了很多ip反查的知识。下面带大家一起了解下域名反查和…

    2022年6月14日
  • 2022年金三银四求职旺季到,HR招聘黑话需了解

    眼下已经到了2022年金三银四的求职旺季,很多人准备在此期间跳槽涨薪,为何被称之为金三银四呢?大概率是因为3月和4月很多公司各项目已经正式开启一年的运营,这个时候就需要招聘合适的人…

    2022年3月7日
  • 百度推出付费文心一言专业版

    11月1日消息,百度正式上线文心一言专业版,并明确了定价。此前向用户开放的文心一言基础版,仍可免费使用。基础版基于文心大模型3.5,基于4.0的专业版具备更强的模型能力和图片生成能…

    2023年11月6日
  • 谷歌下周推出以购物为主题的通用顶级域名!

    谷歌下周推出以购物为主题的通用顶级域名! 据外媒报道,谷歌再次动用了闲置的通用顶级域名,计划下周开始销售以购物为主题的字符串,显然已经放弃了将其用作专门与YouTube相关的空间的…

    2022年3月23日