title: How do I use my existing toggle to also switch between two css sheets?
body: <p>I am trying to implement a light mode/dark mode toggle on a website. The toggle itself is working as expected, but I can't figure out how to also make it switch between style sheets. I am new to JS so the CSS/HTML is there, but I can't get the script right.</p>
  <p>So this is what I have so far that works on its own before trying to switch style sheets...</p>
  <p>CSS:</p>
  <pre><code>&lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;light-styles.css&quot; id=&quot;theme-link&quot;&gt;
  &lt;/head&gt;
  
  &lt;style&gt;
  
  /* Light Mode / Dark Mode Switch */
  
  #switchposition { 
    position: relative; 
    display: flex; 
    flex-direction: 
    column-reverse; 
    justify-content: start; 
    align-items: start;
  }
  
  #modelabel { 
    position: relative; 
    font-size: 14px; 
    color: #dc92b9; 
    transition: .4s; 
    margin-bottom: 0; 
    padding-bottom: 0; 
  }
  
  .switch { 
    position: relative; 
    width: 50px; 
    height: 25px; 
  }
  
  .switch input { 
    opacity: 0;
    height: 0; 
    width: 0; 
  }
  
  .slider { 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    transition: 0.4s;
    background-color: #dc92b9;
    border-radius: 34px;
    position: absolute;
    cursor: pointer; 
  }
  
  .slider::before { 
    content: ''; 
    position: absolute; 
    background-color: #f8e8ef;
    width: 15px;
    height: 15px; 
    border-radius: 50%;
    left: 5px; 
    bottom: 5px; 
    transition: 0.4s; 
  }
  
  .switch input:checked + .slider::before { 
    transform: translateX(25px); 
    background-color: #6d5f94; 
  }
  
  .switch input:checked + .slider { 
    background-color: #101010; 
  }
  
  &lt;/style&gt;
  </code></pre>
  <p>HTML:</p>
  <pre><code>  &lt;div id=&quot;switchposition&quot;&gt;
      &lt;p id=&quot;modelabel&quot;&gt;Light Mode&lt;/p&gt;
      &lt;label class=&quot;switch&quot;&gt;
          &lt;input onclick=&quot;toggle()&quot; type=&quot;checkbox&quot; id=&quot;checkBox&quot;&gt;
          &lt;span class=&quot; slider&quot;&gt;&lt;/span&gt;
      &lt;/label&gt;
    &lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>function toggle(){
      var input = document.getElementById(&quot;checkBox&quot;);
      if(input.checked == true){
          modelabel.style.color =&quot;#6d5f94&quot;;
      } else{
          modelabel.style.color =&quot;#dc92b9&quot;;
      }
  
      var x = document.getElementById(&quot;modelabel&quot;);
    if (x.innerHTML === &quot;Light Mode&quot;) {
      x.innerHTML = &quot;Dark Mode&quot;;
    } else {
      x.innerHTML = &quot;Light Mode&quot;;
    }
    
  }
  </code></pre>
  <p>This is what I tried to put into the code to also make it switch between css sheets. When I add this in nothing breaks, but it does not work either.</p>
  <pre><code>function toggle(){
      var input = document.getElementById(&quot;checkBox&quot;);
      if(input.checked == true){
          modelabel.style.color =&quot;#6d5f94&quot;;
      } else{
          modelabel.style.color =&quot;#dc92b9&quot;;
      }
  
      var input = document.getElementById(&quot;theme-link&quot;)
      if (input.checked == true) { 
          theme.setAttribute('href', 'dark-styles.css'); 
      } else { 
          theme.setAttribute('href', 'light-styles.css'); 
      } 
  
      var x = document.getElementById(&quot;modelabel&quot;);
    if (x.innerHTML === &quot;Light Mode&quot;) {
      x.innerHTML = &quot;Dark Mode&quot;;
    } else {
      x.innerHTML = &quot;Light Mode&quot;;
    }
    
  }
  </code></pre>