使用按钮选择颜色而不是复选框开关

Question

我尝试了各种方法来使用按钮而不是现有的复选框，但无法使其工作。我也尝试了 onClick 方法，但也失败了。

演示：https://jsfiddle.net/yxez4a2u/

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" darkModeSwitch="light"> Light </button>
<button type="button" 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');
        }
    });
});

Answer 1

为按钮元素添加ID后，您可以选择它们。然后为每个按钮设置一个事件侦听器，为它们提供单击功能。每个按钮都会使用不同的参数触发 setTheme 函数。之后，它将主题设置为 localStorage。

<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" id="lightModeButton"> Light </button>
<button type="button" id="darkModeButton"> Dark </button>

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

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

const currentTheme = localStorage.getItem('bsTheme') || 'light';
htmlElement.setAttribute('data-bs-theme', currentTheme);
switchElement.checked = currentTheme === 'light';

function setTheme(theme) {
    htmlElement.setAttribute('data-bs-theme', theme);
    localStorage.setItem('bsTheme', theme);
    switchElement.checked = theme === 'light';
}

switchElement.addEventListener('change', function () {
    setTheme(this.checked ? 'light' : 'dark');
});

lightModeButton.addEventListener('click', function () {
    setTheme('light');
});

darkModeButton.addEventListener('click', function () {
    setTheme('dark');
});
});