0
232
ViewsSome colors don't change after switching themes (only in chrome)
I'm working on a project that has a toggle feature to change the theme, but this toggler doesn't work correctly in certain circumstances. When I switch from a dark theme to a light theme, or vice versa, the colors remain unchanged until I hover over those elements.
This problem only occurs in Chrome, but not in Chrome incognito tab and Firefox!
Live Preview: https://sadeghrastgoo.github.io/Axies-NFT-Market-Place
GitHub Repo: https://github.com/SadeghRastgoo/Axies-NFT-Market-Place
_colors.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;
}
}
}
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");
});
2 answers
Answer question0
i used a similar functionality in my website but i take a different approach, this is how my approach looks like, i hope this can help you too
// 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
This problem only occurs in Chrome, but not in Chrome incognito tab and Firefox!
I believe this might have something to do with Google's cache. Try disabling your cache and then load the page again. You can disable it by clicking ctrl+shift+j on your keyboard, then go to the Network section and click on Disable Cache. 