在Web前端识别设备黑夜模式(dark mode)

发布时间:2021年02月24日 // 分类:代码 // 暂无评论

通过JS可以识别设备是否是黑夜模式(dark mode)

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

可以监听黑夜模式的变化:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

浏览器兼容性

Snipaste_2021-02-24_23-56-43.png

参考资料:

本文固定链接
http://www.ywlib.com/archives/172.html

标签
dark mode, 黑夜模式, javascript, web

添加新评论 »

分类
随机文章
最新文章
最近回复
  • amos: 真管用!!!感谢版主
  • Kent: 优秀!
  • Kent: 关于页面里有我的邮箱
  • kincae: 你好,找了很多文档就你的这篇解决了我的问题,可以留个联系方式吗
  • xuesheng: phpredis版本的问题。 phpredis 5.3.0 fixed. * Use long...
  • Proxmox VE 6.1 配置源及关闭订阅提醒 - ZIMRI`Blog: [...]原文链接 https://www.ywlib.com/archives/150.ht...
  • 夏目贵志: 感谢解决困惑我2小时的问题!!!
  • Kent: 啊。。好的。。谢谢你
  • zhuohua liu: 你的网站被Norton Safe Web列为恶意网站,自动拦截的,去发个mail洗白吧,不然影...
  • typecho模板: 只调用随机文章的内容怎么操作啊?类似多思多金博主的你好污啊那种样子的