enable Eventlistener from an html checkbox does not work

Question

I am trying to make a checkbox that, while activated, it activates a < class >, and when deactivated it returned to normal.

Talking about what I’m trying to do, is a button that activates a light-Theme on the site, the body is in the dark-Theme class.

The problem is that I do not know javascript yet, when I try to enable the class "light-Theme" by the javascript code does not work, if you can help thank.

Javascript

const themeSwitch = document.querySelector("input");

themeSwitch.addEventListener("change", () =>{
document.body.classList.toggle("light-theme");
});

In HTML

<label class="switch">
    <i class="fas fa-adjust"></i>
    <div>
         <input type="checkbox" ontoggle="change"/>
         <span class="slider round"></span>
    </div>
</label>

I picked up the javascript code on a website (I didn’t make the code).

Answer 1

When changing the functionality dark-mode for light-mode did not work due to Cascade and inheritance in defining the css.

In the tutorial that you found, the statement order this way:

.light-theme {
  --themeDropDownBg: var(--goldCrayola);
  --themeIconBorderColor: var(--sage);
  --navBg: var(--sage);
  --navLinkHoverBg: var(--paleSpringBud);
  --mainBg: var(--goldCrayola);
  --fontColor: var(--black);
}

.dark-theme {
  --themeDropDownBg: var(--msuGreen);
  --themeIconBorderColor: var(--richBlackForeground);
  --navBg: var(--richBlackForeground);
  --navLinkHoverBg: var(--msuGreen);
  --mainBg: var(--msuGreen);
  --fontColor: var(--white);
}

All I did was reverse that order to the .light-theme take priority over the .dark-mode:

.dark-theme {
    --themeDropDownBg: var(--msuGreen);
    --themeIconBorderColor: var(--richBlackForeground);
    --navBg: var(--richBlackForeground);
    --navLinkHoverBg: var(--msuGreen);
    --mainBg: var(--msuGreen);
    --fontColor: var(--white);
}

.light-theme {
    --themeDropDownBg: var(--goldCrayola);
    --themeIconBorderColor: var(--sage);
    --navBg: var(--sage);
    --navLinkHoverBg: var(--paleSpringBud);
    --mainBg: var(--goldCrayola);
    --fontColor: var(--black);
}

document.addEventListener('DOMContentLoaded', function(e) {
  var themeSwitch = document.querySelector('input');

  themeSwitch.addEventListener('change', () => {
    document.body.classList.toggle('light-theme');
  });
});

:root {
  --navHeight: 70px;
  --sage: #D2CCA1;
  --paleSpringBud: #DEDABA;
  --goldCrayola: #E5C687;
  --richBlackForeground: #0F1A20;
  --white: #f8f8f8;
  --black: #222;
  --msuGreen: #2D4739;
  --gray: #eee;
}

.dark-theme {
  --themeDropDownBg: var(--msuGreen);
  --themeIconBorderColor: var(--richBlackForeground);
  --navBg: var(--richBlackForeground);
  --navLinkHoverBg: var(--msuGreen);
  --mainBg: var(--msuGreen);
  --fontColor: var(--white);
}

.light-theme {
  --themeDropDownBg: var(--goldCrayola);
  --themeIconBorderColor: var(--sage);
  --navBg: var(--sage);
  --navLinkHoverBg: var(--paleSpringBud);
  --mainBg: var(--goldCrayola);
  --fontColor: var(--black);
}

* {
  margin: 0;
  padding: 0;
  color: var(--fontColor);
  transition: background-color 0.6s ease, color 1s ease;
}

.switch {
  width: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch div {
  position: relative;
  display: block;
  background: #eee;
  width: 30px;
  border-radius: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  cursor: pointer;
}

.fa-adjust {
  transform: rotate(180deg);
}

.switch input {
  display: none;
}

.slider {
  background-color: #999;
  transition: 0.4s;
  border-radius: 34px;
  height: 12px;
  width: 12px;
  display: inline-block;
  position: relative;
}

input:checked + .slider {
  transform: translateX(8px);
}

nav {
  background: var(--navBg);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  font-size: 1.1rem;
  position: relative;
}

nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  height: var(--navHeight);
  padding: 0 10px;
  list-style-type: none;
}

nav ul li {
  padding: 12px 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  border-radius: 4px;
  position: relative;
}

nav ul li:hover {
  background-color: var(--navLinkHoverBg);
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  background: var(--mainBg);
  height: calc(100vh - var(--navHeight));
}

<body class="dark-theme">
  <header>
    <nav>
      <ul>
        <li>
          <label class="switch">
            <i class="fas fa-adjust"></i>
            <div>
              <input type="checkbox" />
              <span class="slider round"></span>
            </div>
          </label>
        </li>
        <li>Home</li>
        <li>Services</li>
        <li>Contact</li>
        <li>About</li>
      </ul>
    </nav>
  </header>
  <main>Change My Theme</main>
</body>