如何用JS实现明暗切换按钮？解决点击后颜色闪回问题

核心原因 #

大概率是你的FontAwesome月亮按钮触发了默认页面刷新行为——比如按钮是<button>且嵌套在<form>标签内，默认type为submit，点击会提交表单并刷新页面；或是按钮用了<a>标签，默认会触发跳转（哪怕href为空），导致页面重置，刚修改的CSS变量被清空。

解决步骤 #

1. 阻止按钮默认行为 #

方法一：在函数中添加阻止逻辑

var r = document.querySelector(':root');
function changeBackgroundColor(e){
    // 阻止默认刷新/跳转行为
    e.preventDefault();
    r.style.setProperty('--clr-1', 'blue');
    r.style.setProperty('--clr-2', 'blue');
    r.style.setProperty('--clr-3', 'blue');
    r.style.setProperty('--clr-4', 'blue');
}

HTML绑定事件时要传递事件对象：

<button onclick="changeBackgroundColor(event)">
  <i class="fa-solid fa-moon"></i>
</button>

方法二：给按钮设置正确的type属性

如果用的是<button>标签，直接设置type="button"，避免默认提交行为：

<button type="button" onclick="changeBackgroundColor()">
  <i class="fa-solid fa-moon"></i>
</button>

方法三：修正<a>标签的跳转行为

如果按钮是<a>标签，给href设置无效值或阻止跳转：

<a href="javascript:void(0)" onclick="changeBackgroundColor()">
  <i class="fa-solid fa-moon"></i>
</a>

2. 额外优化：实现配色切换逻辑 #

如果是要做明暗配色切换，推荐用类切换的方式，比逐个修改变量更简洁：
CSS部分：

:root {
  --clr-1: #ffffff;
  --clr-2: #f5f5f5;
  --clr-3: #333333;
  --clr-4: #1a1a1a;
}
:root.dark-theme {
  --clr-1: #1a1a1a;
  --clr-2: #333333;
  --clr-3: #f5f5f5;
  --clr-4: #ffffff;
}

JS部分：

function changeBackgroundColor(e){
    e.preventDefault();
    document.documentElement.classList.toggle('dark-theme');
}

内容的提问来源于stack exchange，提问作者João Marcelo