css - 无论是否激活暗模式，都已激活偏好颜色方案

Question

我在我的网站上使用以下 CSS 在暗模式下反转图像：

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

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

}

它适用于暗模式，但也适用于亮模式。我不确定如何修改它以使其工作 - 看起来很简单。

Answer 1

你需要这个的javascripttoggle方法

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

当您运行此功能时，它将更改为暗模式，当您再次运行时，它将更改为默认值

.darkmode{
  //your css dark mode code
}