Attractive Toggle Button

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>Page Title</title>
	</head>

	<body id="god">

	<div class="container">
	<input type="checkbox" onclick="aditya()" id="raj">
	</div>

	<center><a href="#"><tt>{.CSS}</tt></a><br>
	<tt>Dark-Mode Toggle Button</tt>
	</center>
	</body>

	</html>

CSS:

	#god {
	background: black;
	}
	a {
	text-decoration: none;
	font-size: 3em;
	font-weight: bolder;
	color: red;
	box-shadow: 2px 2px 5px grey;
	text-shadow: 2px 2px grey, 4px 4px lightgrey;
	}
	.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	input[type="checkbox"] {
	width: 200px;
	height: 80px;
	-webkit-appearance: none;
	outline: none;
	background-color: gray;
	border-radius: 80px;
	transition: 0.5s;
	box-shadow: inset 0px 0px 5px gray;
	}

	input:checked[type="checkbox"] {
	background-color: #03a9f4;
	}
	input[type="checkbox"]:before {
	content: " ";
	position: absolute;
	width: 95px;
	height: 95px;
	border-radius: 95px;
	box-shadow: 0px 0px 5px gray;
	background-color: transparent;
	top: -5px;
	left: -4px;
	transition: 0.5s;
	background-size: 100%;
	background-image: url("https://i.ibb.co/stFTRD9/kisspng-full-moon-drawing-moon-png-hd-5ab035b6106b23-2535887215214975260673.png");
	}

	input:checked[type="checkbox"]:before {
	position: absolute;
	left: 115px;
	background-image: url("https://i.ibb.co/xmqp7hg/sun-PNG13419.png");
	background-size: 100%;
	}

JAVA-SCRIPT:

	function aditya() {
	// Get the checkbox
	var a = document.getElementById("raj");

	// Get the output text
	var b = document.getElementById("god");

	// If the checkbox is checked, display the output text
	if (a.checked == true) {
	b.style.background = "white";
	} else {
	b.style.background = "black";
	}
	}