Use buttons to choose colors instead of a checkbox switch

Question

I tried various methods to use button instead of the existing checkbox but couldn't get it to work. I tried the onClick method too but failed as well.

DEMO: 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" 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');
        }
    });
});

Answer 1

After adding IDs to the button elements, You can select them. Then with an event listener to each button, giving them a click function. Each button triggers the setTheme function with different arguments. After that, it sets the theme to 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');
});
});