CSS、JS中检测系统主题动态设置样式 |
您所在的位置：网站首页 › 计算机主题样式 › CSS、JS中检测系统主题动态设置样式 |
|
近来来根据系统主题确定网页主题的场景越来越多了，国内常用的方式是基于CSS媒体查询的，CSS媒体查询不能根据用户喜好来自定义主题，所以本篇文章收纳了CSS和JS两种场景。 CSS利用媒体查询在CSS中可以使用利用媒体属性 preferred-color-scheme。 @media (prefers-color-scheme: light) { body { background: #fff; color: #333; } } @media (prefers-color-scheme: dark) { body { background: #333; color: #fff; } } Javascript检测系统主题 获取系统主题获取JavaScript中的浅色或深色主题，使用matchMedia函数检查是否已满足CSS媒体查询。 通过结果的matches判断当前主题是否正确 const themeMedia = window.matchMedia("(prefers-color-scheme: light)"); if (themeMedia.matches) { console.log('light') } else { console.log('dark') } 监听主题变化上述方法仅能获取一次主题，若用户切换主题时，页面是无法实时更换主题的。 幸运的是，上述的媒体查询结果(MediaQueryList)对象支持addListener方法监听主题变化。 通过监听就可以解决主题切换实时更新的额问题了。 const themeMedia = window.matchMedia("(prefers-color-scheme: light)"); themeMedia.addListener(e => { if (e.matches) { console.log('light') } else { console.log('dark') } }); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |