He estado tratando de implementar un modo oscuro persistente en mi sitio web en Squarespace. Cuando el usuario hace clic en el modo oscuro, queremos que aparezca y desaparezca dicho modo, y hemos estado usando el siguiente CSS/JS para hacerlo:

Fragmento de CSS:

 .dark-mode { span { color: #fff !important; transition: color 0.5s !important; } .section-background, .site-wrapper { background-color: #151515 !important; transition: background 0.5s !important; } }

JS:

 $('.dark-mode-toggle').on('click', function(e) { $('body').toggleClass("dark-mode"); //you can list several class names e.preventDefault(); if (document.body.classList.contains('dark-mode')) { //when the body has the class 'dark' currently localStorage.setItem('darkMode', 'enabled'); //store this data if dark mode is on } else { localStorage.setItem('darkMode', 'disabled'); //store this data if dark mode is off } }); if (localStorage.getItem('darkMode') == 'enabled') { document.body.classList.toggle('dark-mode'); $("i.fas").addClass("fa-sun"); }

Soy consciente de que esto es complicado, ya que todavía me estoy acostumbrando a JS/JQuery, así que estoy usando una combinación de ambos. Sin embargo, cuando la página se carga, parpadeará durante el tiempo de animación especificado, como si acabara de hacer clic en ella. ¿Cómo evito que esto suceda?