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