网页深色模式样式适配(web dark mode support)

目前iOS，macos都有了深色模式，而最近微信最新版也做了深色模式(dark mode)适配，我试了下，手机切换时页面效果样式是实时刷新的。于是就想着web怎么能够监听深色模式，并设置样式。查了资料后，在Stack Overflow上找到了答案，下面来看看

一般通过css里的媒体查询就能适配深色模式: (prefers-color-scheme: dark)，先来看看怎么用js获取当前是否是深色模式

怎么用js判断当前是否是深色模式

// 获取当前是否是深色模式
// window.matchMedia('(prefers-color-scheme: dark)').matches
window.matchMedia && console.log('Is dark mode: ', window.matchMedia('(prefers-color-scheme: dark)').matches)

js实时监听深色模式的切换
// 用js监听深色模式的切换事件

window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {console.log('dark mode change，已' + (event.matches ? '进入': '退出') + 'dark mode')
})
window.matchMedia到底是用来做什么的？我查了下mdn，发现了这样一个示例let mql = window.matchMedia('(max-width: 600px)');document.querySelector(".mq-value").innerText = mql.matches;

怎么用css媒体查询处理深色模式样式
从这个例子看，大概就知道怎么用css来支持dark模式了吧，就是加一个类似小屏适配的一个媒体查询样式，来看个例子

/* dark mode support */
@media (prefers-color-scheme: dark) {body {background-color: black;color: #aaa;}body .content article, header, aside > div, footer  {border-color: #333;color: #aaa;background-color: black;box-shadow: 0 0 10px #333;}
}

深色模式下，一般将背景调暗，字体设置为偏白色即可。zuo11.com 已用上面的方法适配了深色模式，可以体验下。网站是开源的，zuo11.com深色模式支持代码 - github

网页深色模式样式适配(web dark mode support)相关推荐

暗黑模式（黑暗模式，深色模式）适配
暗黑模式(黑暗模式,深色模式)适配全局关闭打开Info.plist 项目配置文件,添加UIUserInterfaceStyle字段,key类型为String, 其value值设置为 Light模式 ...
h5深色模式快速适配背景和字体颜色
@media (prefers-color-scheme: dark) { html, body {filter: invert(1) hue-rotate(180deg);}img, video,a ...
实现页面适配_微信公众号文章页面适配深色模式
最近安卓微信7.0.10正式版发布,更新过后,很多用户发现,之前在测试版中对系统深色模式的适配功能被取消了,小伙伴们对此很是不满,好在Android 10系统手机用户占比很少,影响范围还不是很大,并且 ...
Mac 应用中支持Dark Mode(深色模式)
苹果在10.14版本中添加了主题设置功能,用户可以将主题切换为Dark Mode,切换后系统应用都会自动变成深色.那么如何让我们的应用也能自动适配Dark Mode呢? 暗黑模式的适配主要包括颜色适配 ...
为你的网页添加深色模式
翻译:疯狂的技术宅原文:https://www.creativebloq.com/how-to/how-to-implement-light-or-dark-modes-in-css CSS 规范一 ...
Android深色模式适配原理分析，android应用开发
return when (resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) { Configuration.UI ...
css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
android 9.0谷歌商店,Android 10现可选择Play商店主题模式附Android 9强制开启深色模式教程...
不可否认的是自打苹果于去年推出配备深色模式的 iOS 13以来,整个移动互联网都开始流行起为应用配备深色模式设计的风气,不管用户个人到底喜不喜欢用深色模式,深色模式都已经给出了足够具有说服力的理由来推 ...
Web前端深色模式适配方案
众所周知,GitHub 网站在前不久支持了深色模式.我在看 GitHub 的时候发现浏览器默认的滚动条也变成了深色样式: 我当时猜测应该有一个属性可以声明配色方案,然后浏览器根据声明的配色方案采用相应 ...

网页深色模式样式适配(web dark mode support)

网页深色模式样式适配(web dark mode support)相关推荐

最新文章

热门文章