I have a bootstrap button that toggles some CSS designs for my website when clicked. I am using it to change the background of the website via some simple JS to toggle the class. However, when the button is :active, I get really weird behaviour where it changes the size and color of my button.

If the button is black and large, on active it shrinks to small and white. When you click off, it returns to the correct state.

SASS file

.dark-mode
    #Homepage //ID for div that holds all elements on this page
       background: #202020
       color: white
    .press // ID for custom buttons
       color: white
    .press:hover
       color: white
       text-shadow: 2px 3px 5px #d3d3d3ab
    .quote-widget //custom element
       color: black
       background: #e6e6e6c7

react js file

 /* toggleTheme() function which will change between light and dark mode */
  function toggleTheme() {
    var el = document.body;
    el.classList.toggle("dark-mode"); // toggle class of object with corresponding class
  }

//inside the functional component:

{/* Toggle theme button */}
        <div className='theme-widget'>
          <button onClick={toggleTheme} id="swap" className="toggle-theme">{'\u25D1'}</button>
        </div>