我想在我的导航栏 ( 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
总是回来true
。你应该isOn
在函数外初始化变量
2为什么要转换isOn
为布尔值?它已经是布尔类型..
3你真的不需要else if
.. 如果它不是假的,那就是真的..
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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句