title: Some colors don't change after switching themes (only in chrome)
body: <p>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.</p>
  <p>This problem only occurs in Chrome, but not in Chrome incognito tab and Firefox!</p>
  <p>Live Preview: <a href="https://sadeghrastgoo.github.io/Axies-NFT-Market-Place" rel="nofollow noreferrer">https://sadeghrastgoo.github.io/Axies-NFT-Market-Place</a></p>
  <p>GitHub Repo: <a href="https://github.com/SadeghRastgoo/Axies-NFT-Market-Place" rel="nofollow noreferrer">https://github.com/SadeghRastgoo/Axies-NFT-Market-Place</a></p>
  <p>_colors.scss:</p>
  <pre><code>: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;
      }
    }
  }
  </code></pre>
  <p>script.js:</p>
  <pre><code>document.querySelector(&quot;.theme-light&quot;).addEventListener(&quot;click&quot;, function () {
    document.querySelector(&quot;body&quot;).classList.toggle(&quot;light-colors&quot;);
  });
  document.querySelector(&quot;.theme-dark&quot;).addEventListener(&quot;click&quot;, function () {
    document.querySelector(&quot;body&quot;).classList.toggle(&quot;light-colors&quot;);
  });
  </code></pre>