Tengo el siguiente código en mi sitio web donde intento establecer el modo claro u oscuro en función de la configuración del sistema/navegador de los usuarios, así como la capacidad de cambiar la configuración en función de presionar un botón.
Lo que quiero que suceda es:
¿Quizás me estoy perdiendo algo aquí para que todo funcione correctamente? Principalmente los botones no cambian.
function lightDark() { var el = document.querySelectorAll(".light, .dark") if (el.href.match("light.css")) { el.href = "dark.css"; } else { el.href = "light.css"; } } < script type = "text/javascript" > $('#lightDarkToggle').click(function() { if (window.matchMedia('prefers-color-scheme: dark').matches) { $(this).find('i').toggleClass('fa-sun'), el.href = "dark.css"; } else { $(this).find('i').toggleClass('fa-moon'), el.href = "light.css"; } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link class="light" rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" /> <link class="dark" rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" /> <button id="lightDarkToggle" onclick="lightDark()"><i class="fas fa-moon"></i></button>Creo que esta línea var el = document.querySelectorAll("#light, #dark") debería ser var el = document.querySelectorAll(".light, .dark") , porque sus etiquetas de enlace tienen una clase, no una identificación.
Otra cosa, en su segunda etiqueta de secuencia de comandos, intenta actualizar el.href , pero en esta función, el nunca se define. Se ha definido en otra función ( lightDark() ), por lo que ya no es accesible al final.