I'm trying to make light/light theme for a table in my project,its dark by default so i'm trying to change it to light when i click on the button but when i click it changes to light but not turning back any hints ?
var element = document.getElementById('toggleTheme')
var attributeContent = element.getAttribute('data-layout-mode')
let toggleTheme = document.querySelector(".light-dark-mode");
let styleSheet = document.querySelector("#color-theme");
console.log(attributeContent);
if (attributeContent=="dark") {
toggleTheme.addEventListener("click", () => {
styleSheet.setAttribute("href", "")
})
} else if (attributeContent=="light") {
toggleTheme.addEventListener("click", () => {
styleSheet.setAttribute("href", "{{ asset('css/style.css') }}")
})
} else {
console.log("not found")
}
You only define what to toggle based on the initial value of the attributeContent.
You should better do the test, on whether it is currently dark or light, each time the toggle is clicked.
something like
var element = document.getElementById('toggleTheme')
let toggleTheme = document.querySelector(".light-dark-mode");
let styleSheet = document.querySelector("#color-theme");
toggleTheme.addEventListener("click", function() {
// read the layout mode
var attributeContent = element.getAttribute('data-layout-mode');
if (attributeContent == "dark") {
styleSheet.setAttribute("href", "");
// set the layout mode to the new value
element.setAttribute('data-layout-mode', 'light');
} else if (attributeConten == "light") {
styleSheet.setAttribute("href", "{{ asset('css/style.css') }}");
// set the layout mode to the new value
element.setAttribute('data-layout-mode', 'dark');
} else {
console.log("not found")
}
})