0
225
VistasAlgunos colores no cambian después de cambiar de tema (solo en cromo)
Estoy trabajando en un proyecto que tiene una función de alternancia para cambiar el tema, pero esta alternancia no funciona correctamente en determinadas circunstancias. Cuando cambio de un tema oscuro a un tema claro, o viceversa, los colores permanecen sin cambios hasta que paso el mouse sobre esos elementos.
¡Este problema solo ocurre en Chrome, pero no en la pestaña de incógnito de Chrome y Firefox!
Vista previa en vivo: https://sadeghrastgoo.github.io/Axies-NFT-Market-Place
Repositorio de GitHub: https://github.com/SadeghRastgoo/Axies-NFT-Market-Place
_colores.scss:
:root { --primary-text-color: #fdfdfd; --bg-color: #14141f; --primary-color: #4e3fee; --gray-color: #adadb0; --icon-bg-color: #343444; --bg-color-2: #0d0d12; --line-color: #242431; --primary-color-2: #606067; --bg-black: #030303; --nav-color-1: #2c2c45; } .light-colors { --bg-color: #fdfdfd !important; --primary-text-color: #14141f !important; --gray-color: #919191 !important; --icon-bg-color: #fdfdfd !important; --bg-color-2: #9d9d9d !important; --line-color: #bfbfec !important; --primary-color-2: #d8d8dc !important; --bg-black: #f3f3f3 !important; --nav-color-1: #f1f0f0; .theme-light { fill: var(--primary-text-color) !important; } .btn--primary:hover { color: #fff; } .btn--tertiary:hover { color: #fff; } .feature__icon { color: var(--bg-color); } .footer { h4.text-lg { color: #fff !important; } background: #161616 !important; .social-icon svg path { fill: #000 !important; } } .card { margin-top: 1.5rem; margin-bottom: 1.5rem; .like-tag { background: var(--primary-text-color); color: #fff; } .place-bid--active { background: #14141f !important; } .place-bid__checkbox { box-shadow: rgba(255, 255, 255, 0.5) 0 0 12px -2px !important; } } }secuencia de comandos.js:
document.querySelector(".theme-light").addEventListener("click", function () { document.querySelector("body").classList.toggle("light-colors"); }); document.querySelector(".theme-dark").addEventListener("click", function () { document.querySelector("body").classList.toggle("light-colors"); });2 Respuestas
Responde la pregunta0
Usé una funcionalidad similar en mi sitio web pero adopto un enfoque diferente, así es como se ve mi enfoque, espero que esto también pueda ayudarlo
// Default theme is the one i have in local storage or dark theme when nothing is in the local storage changeTheme(localStorage.theme || "dark"); let themes = { light: { "main-bg-color" : "#F5F5F5", "card-bg-color" : "#08D9D6", "font" : "#252A34", }, dark: { "main-bg-color" : "#23252e", "card-bg-color" : "#1c1e25", "font" : "#fff", }, }; // Toggle theme function changeTheme(theme) { localStorage.setItem("theme", theme); switchCheckbox.checked = theme === "light"; for (let prop in themes[theme]) { // document.documentElement is the root element document.documentElement.style.setProperty("--" + prop, themes[theme][prop]); } } // My toggle switch switchCheckbox.addEventListener("change", () => { changeTheme(switchCheckbox.checked ? "light" : "dark"); });0
¡Este problema solo ocurre en Chrome, pero no en la pestaña de incógnito de Chrome y Firefox!
Creo que esto podría tener algo que ver con el caché de Google. Intente deshabilitar su caché y luego cargue la página nuevamente. Puede desactivarlo haciendo clic en ctrl + shift + j en su teclado, luego vaya a la sección Network y haga clic en Disable Cache . 