JSFiddle - React, Tailwind, and code Playground

HTML

<div class="toggle-darkmode-btn btn-toggle-darkmode" id="darkmode-btn"><input type="checkbox"><span></span></div>
<div class="toggle-darkmode-btn btn-toggle-darkmode" id="darkmode-btn"><input type="checkbox"><span></span></div>

CSS

html {
	width: 100%;
	margin: auto;
	max-width: 1280px;
	overflow-x: hidden;
}

/** general settings **/
body {
	background-color: var(--background);
	padding-top: 15px;
	padding-bottom: 15px;
	color: var(--text);
  font-family: sans-serif;
	line-height: 1.75;
}

body {
  --background: #f7f7f8;
	--main: #ffffff;
	--border: #e0e4e7;
	--text: #244357;
	--link: #0f6c9e;
	--button-hover: #e8ebf0;
}
body.dark-theme {
  --background: #18191a;
	--main: #242526;
	--border: #30343a;
	--text: #909090;
	--link: #ffffffd7;	
	--button-hover: #26292e;
}

@media (prefers-color-scheme: dark) {
  body {
  --background: #18191a;
	--main: #242526;
	--border: #30343a;
	--text: #909090;
	--link: #ffffffd7;	
	--button-hover: #26292e;
  }
  body.light-theme {
  --background: #f7f7f8;
	--main: #ffffff;
	--border: #e0e4e7;
	--text: #244357;
	--link: #0f6c9e;
	--button-hover: #e8ebf0;
  }
}


.toggle-darkmode-btn {
	position: relative;
  width: 40px;
  height: 20px;
  margin: 0 auto;
  border-radius: 40px;
	border: 1px solid var(--border);
	float: right;
}

#darkmode-btn input[type="checkbox"] {
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#darkmode-btn span {
	position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 1px;
  overflow: hidden;
  opacity: 1;
  background-color: var(--background);
  border-radius: 40px;
  transition: 0.2s ease background-color, 0.2s ease opacity;
}

#darkmode-btn span:before,#darkmode-btn span:after {
	content: '';
  position: absolute;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: 0.5s ease transform, 0.2s ease background-color;
}

#darkmode-btn span:before {
	background-color: #fff;
  transform: translate(-18px,0px);
  z-index: 1;
}

#darkmode-btn span:after {
	background-color: var(--link);
  transform: translate(1px,0px);
  z-index: 0;
}

#darkmode-btn input[type="checkbox"]:checked +...

JavaScript

const btn = document.querySelector(".btn-toggle-darkmode");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
  document.body.classList.toggle("dark-theme");
} else if (currentTheme == "light") {
  document.body.classList.toggle("light-theme");
}

btn.addEventListener("click", function() {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
    var theme = document.body.classList.contains("light-theme") ?
      "light" :
      "dark";
  } else {
    document.body.classList.toggle("dark-theme");
    var theme = document.body.classList.contains("dark-theme") ?
      "light" :
      "dark";
  }
  localStorage.setItem("theme", theme);
});