判断系统颜色模式

JS 判断颜色模式

使用matchMedia判断是否符合条件。
该方法返回一个MediaQueryList对象

判断是否支持主题色：

javascript

if (window.matchMedia("(prefers-color-scheme)").media === "not all") {
  console.log("Browser doesn't support dark mode");
}

if (window.matchMedia("(prefers-color-scheme)").media === "not all") {
  console.log("Browser doesn't support dark mode");
}

点击上面按钮判断是否支持主题色

判断是否处于深色模式：

javascript

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  //...
}

if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  //...
}

点击什么按钮判断是否处于深色模式