<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" width="200">
  <circle cx="80" cy="80" r="40" class="neutral"/>
  <rect width="30" height="14" ry="6" x="65" y="115" class="neutral"/>
</svg>

html,body{
  height: 100%;
  margin: 0;
  background: #000;
}
body.active{
  background: #fff;
}

.neutral{
  fill: #ccc;
}

.active{
  fill: yellow;
}

let c = document.querySelector("circle");
let r = document.querySelector("rect");
let b = document.querySelector("body");

window.onwheel = function (e){
  if(e.deltaY > 0){
    c.classList.remove('neutral');
    c.classList.add('active');
    r.classList.remove('neutral');
    r.classList.add('active');
    b.classList.add('active');
  }
  if(e.deltaY < 0) {
    c.classList.remove('active');
    c.classList.add('neutral'); 
    r.classList.add('neutral');
    r.classList.remove('active');
    b.classList.remove('active');
  }
}