需要使用到css中的prefers-color-scheme媒体查询
- no-preference表示用户未制定操作系统主题。作为布尔值时，为false输出。
- light表示用户的操作系统是浅色主题。
- dark表示用户的操作系统是深色主题。
案例
html:
<div class="appIndex">
css中的prefers-color-scheme媒体查询支持暗黑模式
</div>
css:
.appIndex {background: #fff; color: #555;}
// 暗黑模式
@media (prefers-color-scheme: dark) {
.appIndex {background: #333; color: #fff;}
}
// 浅色模式
@media (prefers-color-scheme: light) {
.appIndex {background: #fff; color: #555;}
}
