css深色模式,

一、背景

　　随着iOS 13的发布，黑暗模式越来越多地出现在大众的视野中。支持黑暗模式已经成为现代移动应用和网站的一种趋势。前段时间，微信的改编再次引起热议。深色模式不仅可以大大降低功耗，减弱强光对比度，还可以提供更好的可视性和沉浸感。

　　如何切换黑暗模式

　　IOS:设置显示和亮度外观，选择黑暗Android:系统设置显示黑暗模式。

二、问题

　　如果在系统中设置了暗模式，并且没有对H5页面进行相应的处理，则会出现背景颜色冲突、暗字符显示异常、暗图标显示异常等显示问题。

　　因此，深色模式需要一些调整。

　　我尝试了一些方案：

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

1.声明 color-scheme

　　配色方案

　　有两种方法。

　　1.1米

　　在头部声明meta name= color-scheme content= light dark ，并声明当前页面同时支持亮暗两种模式。当系统切换到黑暗模式时，浏览器的默认风格也会切换到黑暗；

　　1.2厘米

　　下面的css也可以达到上面元声明的效果。

　　:root {配色方案：亮暗；}注意：此语句不会自动适配页面，只影响浏览器的默认样式。

　　更多信息可以在W3C文档《CSS Color Adjustment Module Level 1》中找到。

2.通过 CSS 媒体查询

　　首选颜色方案

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

　　无偏好

　　意味着系统不知道用户在这方面的选项。在布尔值的上下文中，其执行结果为false。

　　光

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

　　黑暗

　　表示用户已经通知系统他们选择使用带有深色主题的界面。

　　:root {配色方案：亮暗；背景：白色；颜色：黑色；} @ media(preferred-color-scheme:dark){:root { background:black；颜色：白色；} }//如果颜色很多，建议使用CSS变量管理颜色值

3.图片适配

　　使用图片来源标签设置不同模式下图片的url。

　　HTML图片元素通过包括零个或多个源元素和一个img元素，为不同的显示器/设备场景提供图像版本。

　　浏览器将选择最匹配的子源元素，如果没有匹配，它将选择img元素的src属性中的URL。然后，所选择的图像被呈现在由img元素占据的空间中。

　　图片！-黑暗模式下的图片-source srcset= dark . jpg media=(preferences-color-scheme:dark)/！-默认模式下的图片-img src= light . jpg //picture

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

　　 4.1 match media

　　Window的matchMedia()方法返回一个新的MediaQueryList对象，该对象代表指定媒体查询(en-US)字符串的解析结果。返回的MediaQueryList可用于确定文档是否匹配媒体查询，或者监视文档以确定它是否匹配或停止匹配媒体查询。

　　4.2添加侦听器()

　　MediaQueryList接口的addListener()方法为MediaQueryListener增加了一个监听器，它会运行一个自定义的回调函数来响应媒体查询状态的变化。

　　JavaScript监控判断

　　const media query=window . match media((preferences-color-scheme:dark))函数darkmodelhandler(){ if(media query . matches){ console . log(现在是暗模式)} Else {console.log(现在是亮模式)} }//判断当前模式darkmodelhandler()//监控模式变化。媒体查询。Addlistener (darkmodehandler)就是这样。本文详细介绍了Html5项目适配系统的黑暗模式方案概要。更多相关Html5黑暗模式内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。