prefers color-scheme激活，无论暗模式是否激活

Question

我在我的网站上使用下面的CSS在深色模式下反转图像：

@media (prefers-color-scheme: dark) {

    #main-logo img {filter: invert(1);}

}

它适用于暗模式，但在亮模式下也是激活的。我不确定如何修改它才能让它工作--它看起来很简单。

Answer 1

为此，您需要javascript toggle方法。

function darkMode() {
  const element = document.getElementById("main-logo");
  element.classList.toggle("darkmode");
}

当您运行此函数时，它将更改为暗模式，当您再次运行它时，它将更改为默认模式

.darkmode{
  //your css dark mode code
}