如何将明暗模式切换复选框改为两个独立功能按钮？

直接修改HTML和JS代码，让两个按钮分别触发指定主题的设置，同时可以同步原复选框的状态（如果需要保留复选框），具体改动如下：

修改后的HTML代码 #

<input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="toggleTheme()" />
<hr />
<button type="button" data-bs-theme-value="light" onclick="setTheme('light')"> Light </button>
<button type="button" data-bs-theme-value="dark" onclick="setTheme('dark')"> Dark </button>
<hr />
<p>
This is a sample text
</p>

修改后的JS代码 #

// 原复选框的切换逻辑，保留状态同步
function toggleTheme() {
  const element = document.body;
  element.dataset.bsTheme = element.dataset.bsTheme === "dark" ? "light" : "dark";
  syncCheckbox();
}

// 按钮触发的主题设置函数
function setTheme(theme) {
  document.body.dataset.bsTheme = theme;
  syncCheckbox();
}

// 同步复选框与当前主题的状态
function syncCheckbox() {
  const checkbox = document.getElementById('flexSwitchCheckChecked');
  checkbox.checked = document.body.dataset.bsTheme === 'dark';
}

改动说明 #

• 给两个按钮分别绑定setTheme函数，传入对应的主题参数，点击时直接设置body的data-bs-theme属性为目标主题
• 新增syncCheckbox函数，确保按钮切换主题时，原复选框的勾选状态和当前主题保持一致（如果不需要保留复选框，可以直接删除复选框相关的HTML和JS代码）
• 原复选框的切换逻辑保留，调用syncCheckbox维持状态同步

内容的提问来源于stack exchange，提问作者Elaine Byene