web跟随系统暗黑模式

html-css019

web跟随系统暗黑模式,第1张

现代的系统windows/mocOS/IOS/Android/Linus等等几乎都支持了整个系统的暗黑色主题与亮色主题模式的选择切换, 现代web浏览器自然也都跟随着加入了这一功能. 那么如何将这些功能应用到我们的实际项目中呢?这里就涉及到新的css样式

当系统支持暗黑模式的时候就会应用到 @media (prefers-color-scheme: dark) 内部的样式

如果有独立分开的css样式文件,可使用js判断是否处于暗黑模式,然后再确定加载那个css样式即可, js获取media信息如下

通过监听matchMedia的change事件可判断用户是否切换了暗黑/亮色模式

效果如下

本文首先介绍了暗黑模式的css样式, 通过使用css的meida查询器设置系统的样式. 然后介绍了通过js查询系统的暗黑模式状态 , 最后介绍了使用js监听系统模式动态变化事件. 能用js控制自然会发挥js的能力,有了更多的可操控性.

ios13暗黑模式设置的方法如下：

1、手机向下滑动到ControlCenter。

2、长按亮度滑块。

3、点击左下角的黑暗模式图标切换即可。

iOS13是苹果公司2019年6月4日在美国圣何塞McEnery会议中心举行推出的新一代手机操作系统，带来深色模式，以及隐私保护新功能。2019年9月11日，在2019苹果秋季新品发布会上，苹果宣布于2019年9月19日推送iOS13正式版，支持iPhone6S及后续机型，另外iOS13.1也将于9月30日推送。iOS13中，苹果将FaceID的识别速度提升百分之30。除此之外，通过改进AppStore应用的打包方式，App的占容大小被压缩百分之50，升级占容被压缩百分之60的空间。

暗黑模式在macOS上推出后，又推广到移动端——在iOS 13上正式开放出来！

其实简单而言就是以前常见App中的夜间模式罢了！只是集成到系统这个单例中去了而已！当然体验自我感觉不是很喜欢（不喜欢太暗色系的