Light/Dark button

by Alon Rotem

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/regular.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/solid.min.css">
<body class="dark">

  <div id="darkbright-switch" class="toggle-btn-wrapper">
    <div class="tottle-indicator">
      <i id="darkbright-icon" class="fa-solid fa-moon"></i>
    </div>
  </div>

</body>

CSS

body {
      transition: background-color 200ms linear;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
}

body.dark {
  background-color: black;
}

body.bright {
  background-color: white;
}

body.dark .toggle-btn-wrapper {
  border: 1px solid white;
}

body.bright .toggle-btn-wrapper {
  border: 1px solid black;
}

.toggle-btn-wrapper {
  border: 1px solid black;
  display: inline-block;
  width: 40px;
  border-radius: 10px;
  cursor: pointer;
}

.tottle-indicator i {
  transition: left 200ms ease-in-out;
}

.tottle-indicator i.fa-sun {
    position: relative;
    top: 1px;
    left: 2px;
    color: #FDB813;
}

.tottle-indicator i.fa-moon {
    position: relative;
    top: 1px;
    left: 22px;
    color: #bbdbf5;
}

JavaScript

document.body.onload = function(){
	//alert("sdffds")
  let darkbright_switch = document.getElementById("darkbright-switch");
  darkbright_switch.addEventListener('click', toggleMode);
}

function toggleMode()
{
	let darkbright_icon = document.getElementById("darkbright-icon");
	if(document.body.classList.contains("dark"))
  {
  	document.body.classList.remove("dark");
    document.body.classList.remove("bright");
    darkbright_icon.classList.remove("fa-moon");
    darkbright_icon.classList.add("fa-sun");
  }
  else
  {
  	document.body.classList.remove("bright");
    document.body.classList.add("dark");  
  	darkbright_icon.classList.remove("fa-sun");
    darkbright_icon.classList.add("fa-moon");
  }
}