admin 管理员组

文章数量: 1184232

如何实现网页跟随系统主题切换？想必大家都是用过媒体查询 @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

本文标签： 响应式设 编程 切换

版权声明：本文标题：响应式设计新玩法：让网站适应用户的桌面环境变化 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1770648306a3536043.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。