『XXG笔记』判断系统暗黑模式

👋 本文章为我(XXG)原创，由于个人能力有限，此笔记可能会错漏、过时、或需要补充。
📖 笔记文章由于多平台发布，为了修改方便，可以参观我的博客：https://xxggg.github.io
🚀 我会根据我的知识学习，持续更新、完善这些笔记。让它更加通俗易懂，少错误。
🐤 本文章对应博客里的：https://xxggg.github.io/Note/Judge_Dark.html

🟥 CSS 判断系统暗黑模式

Ⓜ️ 媒体查询 prefers-color-scheme

@media (prefers-color-scheme: light) {
    /* 主题设置为浅色 */
}
@media (prefers-color-scheme: dark) {
    /* 主题设置为深色 */
}
@media (prefers-color-scheme: no-preference) {
      /* 获取不到主题时的适配方案 */
}

• no-preference：表示获取不到主题时的适配方案。
• light：表示用户的操作系统是浅色主题（light）
• dark：表示用户的操作系统是深色主题（dark）

🟨 JS 判断系统暗黑模式

const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
if (systemTheme.matches) { // 是深色
  // 主题设置为深色。
} else { // 不是深色
  // 主题设置为浅色。
}