I recently implemented a dark mode toggle button in my project after watching a tutorial on YouTube. Here is the HTML code for it:
<div class="dark-div">
<input type="checkbox" class="checkbox" id="chk" />
<label class="label" for="chk">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
My goal is to dynamically change the table class name when the dark mode button is clicked. The table uses Bootstrap classes, and I specifically want to switch from one Bootstrap class to another (for a dark table).
This is how my table is defined in HTML:
<table id="myTable" class="sortable table table-striped table-hover dataframe">
I need to change the class to "sortable table table-dark table-hover dataframe" upon clicking the dark mode button.
The JavaScript code for the dark mode toggle button looks like this:
<script>
const chk = document.getElementById('chk');
chk.addEventListener('change', () => {
document.body.classList.toggle('dark');
});
</script>