Estoy tratando de hacer un botón de alternar simple para este script para cambiar los temas de claro a oscuro, pero parece que no funciona cuando se alterna. Creo que el script está listo, pero no puedo encontrar la manera de crear un botón que cambie entre el modo claro y el oscuro.
JavaScript:
var toggle = document.getElementById("theme-toggle"); var storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); if (storedTheme) document.documentElement.setAttribute('data-theme', storedTheme) toggle.onclick = function() { var currentTheme = document.documentElement.getAttribute("data-theme"); var targetTheme = "light"; if (currentTheme === "light") { targetTheme = "dark"; } document.documentElement.setAttribute('data-theme', targetTheme) localStorage.setItem('theme', targetTheme); };CSS:
html[data-theme='light'] { --background-color: #9ec8ff; --text-color: #000000d8; --link-color: #543fd7; --header-color:#7ab1ff; --headerborder-color: 0.5px solid rgb(0, 0, 0); --logo-color: invert(0); --button-color:#ffffff; --signinbutton-color:#ffffff; --buttonborder-color: 1.5px solid rgb(0, 0, 0); --profile-border: 3px solid black; --table-border: rgb(0, 0, 0); --social-login: antiquewhite; --social-border: 0px solid rgb(50, 51, 52); } html[data-theme='dark'] { --background-color: #000000; --text-color: #F7F8F8; --link-color: #82f7ff; --header-color:#1A1A1B; --headerborder-color: 1px solid rgb(50, 51, 52); --logo-color: invert(1); --button-color:#1A1A1B; --signinbutton-color:#000000; --buttonborder-color: 1.5px solid rgb(50, 51, 52); --profile-border: 3px solid rgb(50, 51, 52); --table-border: rgb(100,102,104); --social-login: #1A1A1B; --social-border: 1.5px solid rgb(50, 51, 52); } [data-theme='light'] .d-block-light, [data-theme='dark'] .d-block-dark { display: block !important; }HTML:
<button id="theme-toggle" type="button">Toggle theme</button>Mejora tu solución y haz que funcione
Mira mi código:
<html> <body></body> <label class="switch"> <input type="checkbox" id='data-theme'> <span class="slider"></span> </label> </html> html[data-theme='light'] { background-color: #9ec8ff; } html[data-theme='dark'] { background-color: #000000; } [data-theme='light'] .d-block-light, [data-theme='dark'] .d-block-dark { display: block !important; } const toggle = document.getElementById("data-theme"); const storedTheme = localStorage.getItem('theme') || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); if (storedTheme) { document.documentElement.setAttribute('data-theme', storedTheme) } toggle.onclick = function() { const currentTheme = document.documentElement.getAttribute("data-theme"); let targetTheme = "light"; if (currentTheme === "light") { targetTheme = "dark"; } document.documentElement.setAttribute('data-theme', targetTheme) localStorage.setItem('theme', targetTheme); };