纯JavaScript的HTML暗模式

我想用javascript将黑暗模式添加到我的网站。它在技术上是有效的，但不是我想要的方式。它只将车身颜色设置为黑色。但是挑战是为“

”标记设置颜色。老实说，我真的不懂JavaScript，所以我不知道怎么做。 这是我的密码：

document.body.style.backgroundColor=sessionStorage.getItem（'bg'）；
document.body.style.color=sessionStorage.getItem（'cc'）；
document.div.style.backgroundColor=sessionStorage.getItem（'cardbg'）；
document.div.style.color=sessionStorage.getItem（'cardcc'）；
函数变暗（）{
if（sessionStorage.getItem（'bg'）=='rgb（241，241，241）'{
sessionStorage.setItem（'bg'，'rgb（6,23,37'）；
setItem（'cc'，'#fff'）；
sessionStorage.setItem（'cardbg'，'rgb（5,15,36）'）；
setItem（'cardcc'，'#fff'）；
}
else if（sessionStorage.getItem（'bg'）==null | |未定义）{
sessionStorage.setItem（'bg'，'rgb（6,23,37'）；
sessionStorage.setItem（'cc'，'#000'）；
sessionStorage.setItem（'cardbg'，'rgb（5,15,36）'）；
setItem（'cardcc'，'#fff'）；
}
else if（sessionStorage.getItem（'bg'）='rgb（6,23,37'））{
sessionStorage.setItem（'bg'，'rgb（241，241，241'）；
sessionStorage.setItem（'cc'，'#000'）；
sessionStorage.setItem（'cardbg'，'rgb（5,15,36）'）；
setItem（'cardcc'，'#fff'）；
}
document.body.style.backgroundColor=会话存储.getItem（'bg'）；
document.body.style.color=sessionStorage.getItem（'cc'）；
document.div.style.backgroundColor=sessionStorage.getItem（'cardbg'）；
document.div.style.color=sessionStorage.getItem（'cardcc'）；
}

身体{
背景色：#f1f1；
颜色：#000；
}
.卡片{
背景色：红色；
颜色：黑色；
}
标题
一些文字

另一个文本

您可以将主题存储在对象中，并在运行时使用

document.documentElement.style.setProperty（）

例如：

const dark = {
  'background-color': '#FFFFFF'
}

const light = {
  'background-color': '#000000'
}

在CSS中（注意：仅使用样式div的

body>div

）

最后，如果您需要切换主题，可以执行以下操作：

function setTheme(a_oTheme) {
  Object.keys(a_oTheme).forEach(k =>
    document.documentElement.style.setProperty(`--${k}`, a_oTheme[k])
  );
}

---

为什么不使用多个css主题样式，而不是编码每个元素的主题样式呢。您可以尝试使用css变量，这样就不需要覆盖每个主题的css。

function setTheme(a_oTheme) {
  Object.keys(a_oTheme).forEach(k =>
    document.documentElement.style.setProperty(`--${k}`, a_oTheme[k])
  );
}