JS dark theme not changing

Question

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")
}

Answer 1

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")
  }
})