如何覆盖CSS配色方案设置

Question

在HTML中。现在我知道我们可以要求CSS在用户更改系统配色方案时做一些事情，例如

@media (prefers-color-scheme: dark)

但是，如果我想覆盖该设置，例如晚上需要浅色方案，但又不想更改系统的颜色方案设置，有什么JavaScript或jQuery方式可以欺骗CSS（即使在系统是浅色的，还是相反的），因此我可以通过单击某些元素来切换网页配色方案？

Answer 1

您可以为其定义两个类。例如。CSS文件中的“ colourSchemeDay”和“ colourSchemeNight”。然后，您可以通过在类上设置时间来操纵它们。

if (time >=6AM && time <= 8PM){
    document.getElementById("myElement");
    element.classList.remove("colourSchemeNight");
    element.classList.add ("colourSchemeDay");
} else {
    document.getElementById("myElement");
    element.classList.add("colourSchemeNight");
    element.classList.remove("colourSchemeDay");
}