Question

0

68

Views

JS dark theme not changing

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T18:54:12.825Z

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