title: Invert colors of html when clicking (except imgs)
body: <p>I've created an <strong>on/off button</strong> and I would like for the html's content's <strong>colors to invert</strong> when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use <code>+</code> <code>space</code> <code>~</code> or <code>&gt;</code> to trigger the effect.. Does anyone know how it would be possible to do it please? </p>
  
  <p>Here's the code for now but it's wrong for the html part..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function invertFunction(x) {
      x.classList.toggle("invertbutton");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.invertfunction{
    cursor:pointer;
      position:fixed;
      top:20px;
      left:20px;
      width:60px;
    height:30px;
  }
  
  #onbutton{
      width:60px;
      height:30px;
      background-color:#fff;
      border-radius:10px;
      border:1px solid #848484;
  -webkit-transition:.3s ease;
  -moz-transition:.3s ease;
  -o-transition:.3s ease;
  transition:.3s ease;
  }
  
  #movingbutton{
      width:30px;
      height:30px;
      border-radius:10px;
      border:1px solid #848484;
      background-color:#BDBDBD;
  -webkit-transition:.2s ease;
  -moz-transition:.2s ease;
  -o-transition:.2s ease;
  transition:.2s ease;
  }
  
  .invertbutton #onbutton{
      background-color:#42B94E;
  }
  
  .invertbutton #movingbutton{
  transform: translate(30px);
  }
  
  .invertbutton .html{
    -webkit-filter: invert(100%);
      filter: invert(100%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;div class="invertfunction"onclick="invertFunction(this)"&gt;
      &lt;div id="onbutton"&gt;
      &lt;div id="movingbutton"&gt;&lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for the help! :)</p>