'Some 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");
});
javascripthtmlcss


Solution 1:[1]

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");
});

Solution 2:[2]

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. enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mmh4all
Solution 2 Rani Giterman

Related Questions