为什么我的 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 总是 return true。你应该在函数外初始化 isOn 变量

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

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

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

Why doesn't my JS update my data-theme back?

html

javascript

css

responsive