如何用按钮替代复选框实现Bootstrap 5主题切换功能？

问题说明 #

我尝试了多种方法，想用按钮替代现有的复选框来实现Bootstrap 5主题切换，但都未能成功，包括尝试onClick方法也失败了。现有代码包含复选框主题切换逻辑及两个切换按钮，具体代码如下：

原HTML代码 #

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
  <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
</div>

<button type="button" onclick="darkModeSwitch('light')"> Light </button>
<button type="button" onclick="darkModeSwitch('dark')"> Dark </button>

<p>
This is a Bootstrap 5 color mode with storage functionality
</p>

原JS代码 #

document.addEventListener('DOMContentLoaded', (event) => {
    const htmlElement = document.documentElement;
    const switchElement = document.getElementById('darkModeSwitch');

    // Set the default theme to dark if no setting is found in local storage
    const currentTheme = localStorage.getItem('bsTheme') || 'light';
    htmlElement.setAttribute('data-bs-theme', currentTheme);
    switchElement.checked = currentTheme === 'light';

    switchElement.addEventListener('change', function () {
        if (this.checked) {
            htmlElement.setAttribute('data-bs-theme', 'light');
            localStorage.setItem('bsTheme', 'light');
        } else {
            htmlElement.setAttribute('data-bs-theme', 'dark');
            localStorage.setItem('bsTheme', 'dark');
        }
    });
});

解决方案 #

核心问题是原代码未定义按钮调用的darkModeSwitch函数，同时需要保证按钮操作与复选框状态同步。修改后的完整代码如下：

修改后HTML代码 #

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="darkModeSwitch" checked>
  <label class="form-check-label" for="darkModeSwitch">Dark Mode</label>
</div>

<button type="button" onclick="darkModeSwitch('light')"> Light </button>
<button type="button" onclick="darkModeSwitch('dark')"> Dark </button>

<p>
This is a Bootstrap 5 color mode with storage functionality
</p>

修改后JS代码 #

document.addEventListener('DOMContentLoaded', (event) => {
    const htmlElement = document.documentElement;
    const switchElement = document.getElementById('darkModeSwitch');

    // 从本地存储获取主题，默认浅色
    const currentTheme = localStorage.getItem('bsTheme') || 'light';
    htmlElement.setAttribute('data-bs-theme', currentTheme);
    switchElement.checked = currentTheme === 'light';

    // 复选框切换事件
    switchElement.addEventListener('change', function () {
        const targetTheme = this.checked ? 'light' : 'dark';
        updateTheme(targetTheme);
    });
});

// 定义按钮调用的主题切换函数
function darkModeSwitch(targetTheme) {
    const switchElement = document.getElementById('darkModeSwitch');
    
    updateTheme(targetTheme);
    // 同步复选框状态
    switchElement.checked = targetTheme === 'light';
}

// 提取通用主题更新逻辑
function updateTheme(theme) {
    const htmlElement = document.documentElement;
    htmlElement.setAttribute('data-bs-theme', theme);
    localStorage.setItem('bsTheme', theme);
}

关键修改点 #

• 新增darkModeSwitch函数，接收目标主题参数，调用通用的updateTheme方法更新主题，并同步复选框的选中状态
• 提取updateTheme函数统一处理主题设置和本地存储逻辑，避免代码重复
• 复选框的change事件也改为调用updateTheme，保证两种操作逻辑一致

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