I am trying to change the input checkbox that toggles between light and dark mode into two separate buttons. How can I achieve this functionality?
Check out the demo here: https://jsfiddle.net/ot1ecnxz/1
Here is the HTML code:
<input type="checkbox" role="switch" id="flexSwitchCheckChecked" checked onclick="myFunction()" />
<hr />
<button type="button" data-bs-theme-value="light"> Light </button>
<button type="button" data-bs-theme-value="dark"> Dark </button>
<hr />
<p>
This is a sample text
</p>
This is the JavaScript code:
function myFunction() {
var element = document.body;
element.dataset.bsTheme =
element.dataset.bsTheme == "dark" ? "light" : "dark";
}