通过 matchMedia 获取 Web 中系统主题
原创
©著作权归作者所有:来自51CTO博客作者小驰chi的原创作品,请联系作者获取转载授权,否则将追究法律责任
JavaScript 中的 API
if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
console.log('???? Dark mode is supported');
}
CSS 媒体查询
.day { background: #eee; color: black; }
.night { background: #333; color: white; }
@media (prefers-color-scheme: dark) {
.day.dark-scheme { background: #333; color: white; }
.night.dark-scheme { background: black; color: #ddd; }
}
@media (prefers-color-scheme: light) {
.day.light-scheme { background: white; color: #555; }
.night.light-scheme { background: #eee; color: black; }
}
.day, .night {
display: inline-block;
padding: 1em;
width: 7em;
height: 2em;
vertical-align: middle;
}
matchMedia 的兼容性
matchMedia 的 polyfill