Night Mode using CSS and JavaScript
I like the idea you have here and the implementation looks good.  You are right though that it is not best practice to use !important frequently.
I'd think you could avoid using !importants simply with either of the following:

Order: having night mode CSS come later/below day mode CSS
Specificity: as in div.nightmode or .nightmode div would override just div.

Below I used specificity as the order was more to keep it organized.  Sorry I didn't revise your code but I wanted to test this out for myself and see if my simple idea would work.
Code
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot; dir=&quot;ltr&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Night Mode Test&lt;/title&gt;
    &lt;style media=&quot;screen&quot;&gt;
body, div, h1, p, button{
  transition-duration: 0.4s;
}

body{
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;

        padding: 30px;
      }

      div{
        box-shadow: 0 0 10px gray;
        text-align: center;
        padding: 15px;
      }

      button{
        background: green;
        color: white;
        padding: 1em 3em;
        border-radius: 10px;
        margin: 50px;
        outline: 0;
        border: 0;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
      }


      .nightMode button{
        background: white;
        color: green;
      }

      .nightMode{
        background: black;
      }

      .nightMode div{
        box-shadow: 0 0 10px gold;
      }

      .nightMode h1, .nightMode p{
        color: white;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;&quot;&gt;
      &lt;h1&gt;Some Sample Stuff&lt;/h1&gt;
      &lt;p&gt;Sample Text...&lt;/p&gt;
    &lt;/div&gt;

    &lt;button id=&quot;toggleNightMode&quot; type=&quot;button&quot; name=&quot;button&quot;&gt;Toggle&lt;/button&gt;



  &lt;script type=&quot;text/javascript&quot;&gt;
    const button = document.getElementById('toggleNightMode');
    button.addEventListener('click', function(event){
      if(document.body.classList.contains('nightMode')) document.body.classList.remove('nightMode');
      else document.body.classList.add('nightMode');
    });
  &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

So I'd recommend doing the following:

Combine some of your CSS that uses the same color and/or background
Use specificity to override CSS instead of !importants.  I'd recommend using a class or two (dayMode, nightMode).  My small example only needed one: if it lacked the nightMode class then I knew it was day mode.

CodePen Example