作为一个爱好，我正在做一个YouTube网站的重新设计，我正在做一个亮/暗模式的系统。我让变量改变系统工作，但是我不知道如何渲染我所做的改变。 以下是我的HTML文件(仅正文部分，点击此处查看全文):

<div class="header">
  <a href="https://codepen.io/ReallyBadDeveloper/pen/mdzKqZY">
  <img src="https://www.youtube.com/s/desktop/c1d331ff/img/favicon_48x48.png">
  </a>
  <button class="lightdark" onclick="darkLight">
    <svg viewBox="0 0 512 512" width="20" title="adjust" onclick="darkLight()">
  <path d="M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z" />
</svg>
    <p>Adjust colors</p>
  </button>
</div>
<div class="body">
  <p>cool</p>
</div>

JavaScript代码:

var r = document.querySelector(':root');
var isdark = 0;

function darkLight() {
  if (isdark == 0) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b')
    r.style.setProperty('--fontcolor', 'white')
    isdark = 1;
  } else if (isdark == 1) {
    r.style.setProperty('--backgroundcolor', '#d4d4d4')
    r.style.setProperty('--bodycolor', '#f2f2f2')
    r.style.setProperty('--fontcolor', 'black')
    isdark = 0;
  }
}

CSS代码:

@import url('https://fonts.googleapis.com/css2?family=Lexend&family=Nunito&display=swap');
:root {
  --maincolor: #ed1818;
  --backgroundcolor: #d4d4d4;
  --bodycolor: #f2f2f2;
  --fontcolor: black;
}
body {
  background-color: var(--backgroundcolor);
  font-family: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 20px;
}
.body {
  background-color: var(--bodycolor);
  border-radius: 5px;
  padding: 10px 30px;
}
.header {
  padding: 20px 0px;
}
button {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--backgroundcolor);
  font-famliy: Nunito, sans-serif;
  color: var(--fontcolor);
  padding: 10px;
  transition-duration: 0.2s;
}
button:hover {
  border: 0px solid black;
  border-radius: 5px;
  background-color: var(--bodycolor);
  font-famliy: Nunito, sans-serif;
  color: var(--fontcolor);
  cursor: pointer;
}
.header {
  /* empty for now? */
}

有人能帮忙吗？

这段代码的问题在于if和else if块中的条件语句。

没有使用比较运算符(==或===)来检查isdark的值，而是使用了赋值运算符(=)。

这意味着每次执行if或else if块时，isdark都被设置为0，并且这些块中的代码将总是像isdark为0一样运行。

要解决这个问题，请将=运算符更改为==或===以正确比较isdark的值:

var r = document.querySelector(':root');
var isdark = 0;

function darkLight() {
  if (isdark == 0) {
    r.style.setProperty('--backgroundcolor', '#1a1a1a');
    r.style.setProperty('--bodycolor', '#3b3b3b')
    r.style.setProperty('--fontcolor', 'white')
    isdark = 1;
  } else if (isdark == 1) {
    r.style.setProperty('--backgroundcolor', '#d4d4d4')
    r.style.setProperty('--bodycolor', '#f2f2f2')
    r.style.setProperty('--fontcolor', 'black')
    isdark = 0;
  }
}