Dark Mode Switch

index.html

<div class="toggle-switch">
	<label for="darkSwitch">
		<input type="checkbox" id="darkSwitch" />
		<span class="toggle-slider"></span>
	</label>
</div>

<script>
function initTheme(){var e=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch");darkSwitch.checked=e,e?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme")}function resetTheme(){darkSwitch.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))}var darkSwitch=document.getElementById("darkSwitch");window.addEventListener("load",function(){darkSwitch&&(initTheme(),darkSwitch.addEventListener("change",function(){resetTheme()}))});
</script>

<style>
[data-theme="dark"] {
	background-color: #121212 !important;
	color: #c9d1d9;
	transition: 0.2s;
}

[data-theme="dark"] .bg-light {
	background-color: #777 !important;
	transition: 0.2s;
}

[data-theme="dark"] .bg-white {
	background-color: #121212 !important;
	transition: 0.2s;
}

[data-theme="dark"] .bg-black {
	background-color: #444 !important;
	transition: 0.2s;
}

[data-theme="dark"] .dS-logo {
	fill:#fff !important;
	transition: 0.2s;
}
[data-theme="dark"] .dS-text {
	color:#ffffff !important;
	transition: 0.2s;
}



.toggle-switch {
	position: relative;
	width: 40px;
	height: 20px;
}

.toggle-switch label {
	position: absolute;
	width: 100%;
	height: 100%;
	cursor: pointer;
	left: 0;
}

.toggle-switch input {
	position: absolute;
	display: none;
}

.toggle-slider {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #010529;
	border-radius: 50px;
	transition: 0.2s;
	left: 0;
}

.toggle-switch input:checked ~ .toggle-slider {
	background-color: #C9D1D9;
}

.toggle-slider::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	box-shadow: inset 6px 0px 0px 0px #C9D1D9;
	background-color: #010529;
	transition: 0.2s;
}

.toggle-switch input:checked ~ .toggle-slider::before {
	transform: translateX(20px);
	background-color: #010529;
	box-shadow: none;
}
</style>