I have been working on a project that includes a toggle feature to switch between different themes. However, I am encountering an issue where the theme does not update properly when changing from a dark theme to a light theme or vice versa. The colors remain unchanged until I hover over the elements.
This problem seems to be specific to Chrome, as it does not occur in Chrome's incognito mode or in Firefox!
To see the Live Preview, visit:
You can also access the GitHub Repository here: https://github.com/SadeghRastgoo/Axies-NFT-Market-Place
_colors.scss:
:root {
--primary-text-color: #fdfdfd;
--bg-color: #14141f;
...
script.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");
});