admin管理员组

文章数量:1516870

如何实现网页跟随系统主题切换？想必大家都是用过媒体查询 @media (prefers-color-scheme: dark) 实现亮/暗主题的切换，那如何让其跟随系统自动切换呢？在 window 对象上，有 matchMedia 这个API可以帮助我们解决这个问题。它和css中的媒体查询一样的用法，只是这个是在JS中使用。

先看示例：

基本用法： 

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

可以帮我们获取到系统当前的主题色是否为暗色，其返回一个查询结果对象：

写一个简单的示例： 

<!DOCTYPE html><html lang="en"class="light"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href

本文标签： 与暗色方深度解析编程

版权声明：本文标题：深度解析：window.matchmedia与暗色方案的魔法结合 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1770647060a3256972.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。