详解Html5项目适配系统深色模式方案总结


Posted in HTML / CSS onApril 14, 2021

一、背景

随着 iOS 13 的发布,深色模式(Dark Mode)越来越多地出现在大众的视野中,支持深色模式已经成为现代移动应用和网站的一个潮流,前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗,减弱强光对比,还能 提供更好的可视性和沉浸感。

如何切换深色模式

  • iOS:“设置”–“显示与亮度”–“外观”,选择“深色”
  • Android:“系统设置”–“显示”–“深色模式”。

二、问题

如果系统设置了深色模式,H5页面不做相应的处理,会出现背景色冲突、深色文字显示异常,深色图标显示异常等一些显示上的问题。

所以,需要对深色模式进行一些适配。

我尝试了一些方案:

三、H5项目适配深色模式方案

1.声明 color-scheme

color-scheme

有两种方式。

1.1meta

在head中声明<meta name="color-scheme" content="light dark"> ,声明当前页面支持 light 和 dark 两种模式,系统切换到深色模式时,浏览器默认样式也会切换到深色;

1.2CSS

下面的 css 同样可以实现上面 meta 声明的效果

:root {
    color-scheme: light dark;
}

注意:此声明并非为页面做自动适配,只影响浏览器默认样式

更多信息可查阅 W3C 文档 《CSS Color Adjustment Module Level 1》

2.通过 CSS 媒体查询

prefers-color-scheme

CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

no-preference
表示系统未得知用户在这方面的选项。在布尔值上下文中,其执行结果为 false。

light
表示用户已告知系统他们选择使用浅色主题的界面。

dark
表示用户已告知系统他们选择使用暗色主题的界面。

:root {
    color-scheme: light dark;
    background: white;
    color: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        background: black;
        color: white;
    }
}
//颜色较多的情况,建议使用CSS变量对颜色值进行管理

3.图片适配

利用picture+source标签,设置不同模式下的图片 url。

HTML <picture>元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。
浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的URL。然后,所选图像呈现在<img>元素占据的空间中。

<picture>
    <!-- 深色模式下的图片 -->
    <source srcset="dark.jpg" media="(prefers-color-scheme: dark)" />
    <!-- 默认模式下的图片 -->
    <img src="light.jpg"/>
</picture>

4. JavaScript中判断当前模式&监听模式变化

4.1matchMedia

Window 的matchMedia() 方法返回一个新的MediaQueryList 对象,表示指定的媒体查询 (en-US)字符串解析后的结果。返回的MediaQueryList 可被用于判定Document是否匹配媒体查询,或者监控一个document 来判定它匹配了或者停止匹配了此媒体查询。

4.2addListener()
MediaQueryList接口的addListener()方法向MediaQueryListener添加一个侦听器,该侦听器将运行自定义回调函数以响应媒体查询状态的更改。

JavaScript监听判断

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')

function darkModeHandler() {
    if (mediaQuery.matches) {
        console.log('现在是深色模式')
    } else {
        console.log('现在是浅色模式')
    }
}

// 判断当前模式
darkModeHandler()
// 监听模式变化
mediaQuery.addListener(darkModeHandler)

到此这篇关于详解Html5项目适配系统深色模式方案总结的文章就介绍到这了,更多相关Html5深色模式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
推荐一些比较有用的css3新属性
Nov 11 HTML / CSS
css3一个简易的 LED 数字时钟实现方法
Jan 15 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
CSS3 制作的悬停缩放特效
Apr 13 #HTML / CSS
CSS3 制作的书本翻页特效
You might like
PHP队列用法实例
2014/11/05 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PDO::prepare讲解
2019/01/29 PHP
javascript引用对象的方法
2007/01/11 Javascript
javascript 限制输入脚本大全
2009/11/03 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
select下拉框插件jquery.editable-select详解
2017/01/22 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
Python协程的用法和例子详解
2017/09/09 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python 异或加密字符串的实例
2018/10/14 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
Linux操作面试题
2015/02/11 面试题
初三班主任寄语大全
2014/04/04 职场文书
天地会口号
2014/06/17 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
工作计划范文之财务管理
2019/08/09 职场文书