SIMPLE DARK MODE SWITCH ~ CODING-GREED

SIMPLE DARK MODE SWITCH

Toggle Switch

In this blog we are going to make a simple but attractive Dark Mode toggle switch via HTML Checkbox. This required only fundamental or basic knowledge of HTML , CSS and JavaScript.

HTML:

	<html>
	<head>
	<title></title>
	</head>

	<body>
	<div class="all">
	<input type="checkbox" id="click" onclick ="dark()" />
	</div>
	</body>
	</html>

view raw toggle1.html hosted with ❤ by GitHub

CSS:

	.all
	{
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	}

	input[type="checkbox"]
	{
	width:100px;
	height: 50px;
	background-color: #FFCC21;
	-webkit-appearance:none;
	border-radius: 50px;
	border:2px solid black;
	outline: none;
	}
	input:checked[type="checkbox"]
	{
	background-color: black;
	border:2px solid #FFCC21;
	}

	input[type="checkbox"]:before
	{
	content: " ";
	position: absolute;
	width:35px;
	height: 35px;
	background-color: white;
	border-radius: 35px;
	top:10px;
	left:14px;
	transition-duration: 0.5s;
	}

	input:checked[type="checkbox"]:before
	{
	left:60px;
	background-color: #FFCC21;
	}

	input[type="checkbox"]:after
	{
	content: " ";
	position: absolute;
	width: 35px;
	height: 35px;
	background-color: transparent;
	border-radius: 35px;
	top:10px;
	left:2px;
	}
	input:checked[type="checkbox"]:after
	{
	top:6px;
	left:52px;
	background-color: black;
	}

view raw toggle1.css hosted with ❤ by GitHub

Java-Script:

	function dark()
	{
	var a = document.getElementById("click");
	var b = document.getElementsByTagName('body')[0];

	if(a.checked == true)
	{
	b.style.background = "#000000c9";
	}
	else
	{
	b.style.background = "white";
	}
	}