<div class="wrap">
	<label class="switch">
		<input type="checkbox" onclick="change()">
		<span class="slider round">
			<h1 id="light-text">OFF</h1>
		</span>
	</label>
</div> 

body {
	height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: #ffb830;
	padding: 0;
	margin: 0;
	color: #fff;
}
.wrap {
	margin: auto;
}
.switch {
	position: relative;
	display: inline-block;
	width: 250px;
	height: 80px;
}
.switch input {
	visibility: hidden;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffb830;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	box-shadow: -5px -5px 8px rgba(255,255,255,0.2),
				5px 5px 8px rgba(0,0,0,0.2);
}
.slider:before {
	position: absolute;
	content: "";
	height: 65px;
	width: 65px;
	background: #fff;
	left: 4px;
	bottom: 4px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
input:checked + .slider {
	background: #ff2442;
}
input:checked + .slider:before {
	transform: translateX(177px);
}
.slider.round {
	border-radius: 50px;
}
.slider.round:before {
	border-radius: 50%;
}
.lights-on {
	background: #ff2442;
	width: 100vw;
	height: 100vh;
}

function change() {
	var x = document.getElementById("light-text");
	if (x.innerHTML === "OFF") {
		x.innerHTML = "ON";
	} else {
		x.innerHTML = "OFF";
	}
	var element = document.body;
	element.classList.toggle("lights-on");
}