Adarshreddyash/night_mode.css

## night_mode.css
$light-color: #eee;

body.dark-mode {
  background-color: #485461;
   background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
  color: $light-color;
  a {
    color: #00000;
  }

}

body.light-mode {
  background-color: $light-color;
  color: #000000;
  a {
    color: #000000;
  }
}

/* thank w3schools for this */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

## night_mode.html
<body id="body" class="dark-mode">
  <h1>Mode toggler</h1>

  <label class="switch">
  <input type="checkbox" name="dark_light" onclick="toggleDarkLight()" checked>
  <span class="slider round"></span>
</label>

  <p>Gspace</p>

## night_mode.js
function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
	$light-color: #eee;

	body.dark-mode {
	background-color: #485461;
	background-image: linear-gradient(315deg, #485461 0%, #28313b 74%);
	color: $light-color;
	a {
	color: #00000;
	}

	}

	body.light-mode {
	background-color: $light-color;
	color: #000000;
	a {
	color: #000000;
	}
	}

	/* thank w3schools for this */
	.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
	}

	.switch input {
	opacity: 0;
	width: 0;
	height: 0;
	}

	.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	}

	.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	}

	input:checked + .slider {
	background-color: #2196F3;
	}

	input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
	}

	input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	}

	.slider.round {
	border-radius: 34px;
	}

	.slider.round:before {
	border-radius: 50%;
	}
	<body id="body" class="dark-mode">
	<h1>Mode toggler</h1>

	<label class="switch">
	<input type="checkbox" name="dark_light" onclick="toggleDarkLight()" checked>
	<span class="slider round"></span>
	</label>

	<p>Gspace</p>
	function toggleDarkLight() {
	var body = document.getElementById("body");
	var currentClass = body.className;
	body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
	}