Estoy tratando de hacer un tema claro/claro para una mesa en mi proyecto, está oscuro de manera predeterminada, así que estoy tratando de cambiarlo a claro cuando hago clic en el botón, pero cuando hago clic, cambia a claro pero no retrocede. sugerencias?
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") }Solo define qué alternar en función del valor inicial del attributeContent .
Es mejor que haga la prueba, sobre si actualmente está oscuro o claro, cada vez que se hace clic en el interruptor.
algo como
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") } })