页面是如何根据系统来改变深色和浅色模式的

Question

同问题，例如MDN官网的

Answer 1

用媒体查询：

@media (prefers-color-scheme: light) {
   /* 仅在系统浅色模式下才生效的样式  */
}

@media (prefers-color-scheme: dark) {
   /* 仅在系统深色模式下才生效的样式  */
}

prefers-color-scheme 文档： https://developer.mozilla.org...

再之后一般就是 CSS 变量来控制颜色了。

---

如果你想通过 JS 来判断，也可以：

if (!!window.matchMedia('(prefers-color-scheme: light)').matches) {
  // 浅色模式
} else if (!!window.matchMedia('(prefers-color-scheme: dark)').matches) {
  // 深色模式
}

Answer 2