title: HTML Dark Mode With Pure JavaScript
body: <p>I'd like to add dark mode to my website with javascript. It works technically, but not the way I wanted it to. It only set the body color to black. But the challange is to set color to the &quot;&lt; div &gt;&quot; tags. Honestly I don't really know JavaScript, so I don't know how to do it.
  Here is my code:</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>document.body.style.backgroundColor = sessionStorage.getItem('bg');
  document.body.style.color = sessionStorage.getItem('cc');
  document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
  document.div.style.color = sessionStorage.getItem('cardcc');
  function darker() {
       if ( sessionStorage.getItem('bg') === 'rgb(241, 241, 241)') {
  
              sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
              sessionStorage.setItem('cc', '#fff');
              sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
              sessionStorage.setItem('cardcc', '#fff');
  
  
       }
      else if (sessionStorage.getItem('bg') == null || undefined) {
          sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
          sessionStorage.setItem('cc', '#000');
          sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
          sessionStorage.setItem('cardcc', '#fff');
  
      }
      else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {
  
          sessionStorage.setItem('bg', 'rgb(241, 241, 241)');
          sessionStorage.setItem('cc', '#000');
          sessionStorage.setItem('cardbg', 'rgb(5, 15, 36)');
          sessionStorage.setItem('cardcc', '#fff');
  
  
      }
  document.body.style.backgroundColor = sessionStorage.getItem('bg');
  document.body.style.color = sessionStorage.getItem('cc');
  document.div.style.backgroundColor = sessionStorage.getItem('cardbg');
  document.div.style.color = sessionStorage.getItem('cardcc');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  body {
    background-color: #f1f1f1;
    color: #000;
  }
  
  .card {
    background-color: red;
    color: black;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="card"&gt;
  &lt;h5&gt;Title&lt;/h5&gt;
  &lt;p&gt;Some text...&lt;/p&gt;
  &lt;p&gt;Another text..&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="assets/js/darker.js"&gt;&lt;/script&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>