javascript - 为什么我的JS不更新我的数据主题？

我想在导航栏（ul li）中有一个可以在theme=light和theme=dark之间切换的按钮。但是，仅激活暗模式有效。

码：

我创建了一个按钮
    <li><a href="#" onclick="darkMode()"><i class="fas fa-moon"></i></a></li>，带有JS函数

function darkMode () {
    var isOn = false;
    if(Boolean(isOn) === false) {
        document.documentElement.setAttribute('data-theme', 'dark');
        var isOn = true;
    }
    else if(Boolean(isOn) === true) {
        document.documentElement.setAttribute('data-theme', 'light');
        var isOn = false;
    }
}

和我的CSS看起来像这样：

:root, [data-theme="light"] {
  --bg-color: #ffffff;
  --bg-color-inv: #000000;
  --outline-color: #000000;
  --text-primary: #000000;
  --text-primary-inv: #ffffff;
  --text-secondary: #a4a4a4;
  --text-secondary-hover: #000000;
  --chivo: 'Chivo', sans-serif;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --bg-color-inv: #ffffff;
  --outline-color: #ffffff;
  --text-primary: #ffffff;
  --text-primary-inv: #000000;
  --text-secondary: #5b5b5b;
  --text-secondary-hover: #ffffff;
}

最佳答案

1.通过将isOn设置为false来启动功能。因此Boolean(isOn) === false alwaeys返回true。您应该在函数外部初始化isOn变量

2为什么将isOn转换为布尔值？它已经是布尔类型了。

3您真的不需要else if ..如果不是false，则为true。

4.如下面的注释中所述，无需在isOn内重新启动if else

var isOn = false;

function darkMode () {
    if(!isOn) {
        document.documentElement.setAttribute('data-theme', 'dark');
        isOn = true;
    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        isOn = false;
    }
}

您可以通过更优雅的方式执行以下操作：

var isOn = false;

function darkMode () {

    document.documentElement.setAttribute('data-theme', ['dark', 'light'][+isOn]);
    isOn = !isOn;

}

说明

+isOn将其转换为数字，因此true变为1，而false变为0。
然后，您可以使用该数字作为索引来选择dark或light。

isOn=!isOn翻转isOn的当前值-true变为false和false变为true

关于javascript - 为什么我的JS不更新我的数据主题？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60225830/