需要使用到css中的prefers-color-scheme媒体查询

• no-preference表示用户未制定操作系统主题。作为布尔值时，为false输出。
• light表示用户的操作系统是浅色主题。
• dark表示用户的操作系统是深色主题。

prefers-color-scheme说明

案例

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;}
}