title: How to change body background color with toggle?
body: <p>I am trying to change a couple background colors in the <code>&lt;body&gt;</code> of my website but I want to start out with changing just the body <code>background-color</code>. I am using a <strong>checkbox/switch</strong> to manipulate the background color when toggled but it doesn't seem to work when I click on it. <br>
  <em>Although when I do remove the javascript script, the switch <strong>works.</em></strong></p>
  
  <p>Here is what I have, check it out for yourself:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(function() {
        $('#toggle-event').click(function() {
          $('body').toggleClass('nightmode');
      })
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.nightmode {
      background-color: red;
  }
  .slow{
   transition: left 0.7s;
      -webkit-transition: left 0.7s;
  }
  
  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  
  
  
  input.togglecss + label {
    padding: 2px;
    width: 85px;
    height: 25px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.togglecss + label:before,
  input.togglecss + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.togglecss + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.togglecss + label:after {
    width: 25px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.togglecss:checked + label:before {
    background-color: #8ce196;
  }
  input.togglecss:checked + label:after {
    margin-left: 65px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="switch"&gt;
            &lt;input id="cmn-toggle toggle-event" class="cmn-toggle togglecss" type="checkbox" data-toggle="toggle" data-style="slow"&gt;
            &lt;label for="cmn-toggle"&gt;&lt;/label&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help will be really appreciated, thank you very much!</p>