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

Question

我想在我的导航栏中有一个按钮 ( 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;
}

Answer 1

1. 通过将 isOn 设置为 false 来启动该函数。所以 Boolean(isOn) === false 总是返回 true。您应该在函数外部初始化 isOn 变量

2 为什么将 isOn 转换为 bool 值？它已经是 bool 类型..

3你真的不需要else if..如果它不是假的，那就是真的..

4. 正如下面评论中提到的，不需要在 if else 中重新启动 isOn

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