<span class="controller">Bright Ripple</span>
<div class="ripple"></div>

body {
  background: #FFFFFF;
  font-family: "Teko", sans-serif;
  margin: 0;
  transition: .25s ease-in-out;
}

.controller {
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  min-width: 100px;
  padding: 10px 15px 8px 15px;
  position: absolute;
  font-size: 22px;
  border: solid 3px rgba(0, 0, 0, 0.9);
  text-transform: uppercase;
  top: 50%;
  left: 50%;
  margin: -22px 0 0 -68px;
  cursor: pointer;
  transition: .25s ease-in-out;
  z-index:500;
}

/*Ripple*/
.ripple {
  width: 10px;
  height: 10px;
  opacity: 0;
  transform: scale(0);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  position: fixed;
}

/*Bright Ripple*/
body.dark {
  background: rgba(0, 0, 0, 0.9);
}
body.dark .ripple {
  background: rgba(255, 255, 255, 0.5);
}
body.dark .controller {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
}

/*Animate Function*/
.animate {
  animation: ripple-mo 1s cubic-bezier(0, 0, 0.2, 1);
}
@keyframes ripple-mo {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(10);
    opacity: 0;
  }
}

//Ripple Event Handler
var drawRipple = function(ev) {
  var x = ev.clientX;
  var y = ev.clientY;
  var node = document.querySelector(".ripple");
  var newNode = node.cloneNode(true);
  newNode.classList.add("animate");
  newNode.style.left = ev.clientX - 5 + "px";
  newNode.style.top = ev.clientY - 5 + "px";
  node.parentNode.replaceChild(newNode, node);
};

//Ripple Triggers
window.addEventListener("click", drawRipple);


//Control Handler
var controlHandler = function() {
  document.body.classList.toggle("dark");
  if (document.body.classList.contains("dark")) {
    controller.textContent = "Dark Ripple";
  } else {
    controller.textContent = "Bright Ripple";
  }
};

// Control Trigger
var controller = document.querySelector(".controller");
controller.addEventListener("click", controlHandler);