draggable and adjustable theme switch

hover the emoji → change emoji drag the emoji → follow your mouse click the emoji → change background scroll on the emoji at night → adjust moonlight spread

by dlccyes

HTML

<body>
  <span id="light"></span>
  <span id="night-btn">⛅</span>
</body>

CSS

#night-btn{
    cursor: pointer;
    user-select: none;
    position: absolute;
    z-index: 1;
}
#light{
    position: absolute;
    z-index: 1;
    box-shadow: 0px 0px 31px 20px #ffe6b7;
    border-radius: 50px;
    display: none;
}

JavaScript

var night = 0;
var initPos = [-1, -1];
var lightBlur = 11;
var lightSpread = 0;
var lightAlt = 20;
$('#night-btn').click(function(e) { // change theme
  if (e.clientX == initPos[0] && e.clientY == initPos[1]) { //if click rather than drag
    if (!night) {
      $('#day-css').remove();
      $("#light").css({
        top: $('#night-btn').offset().top + 12,
        left: $('#night-btn').offset().left + 11
      });
      $('body').css('background', '#000');
      $('#night-btn').html('🌝');
      $('#light').show();
      $('#light').css('box-shadow', '0px 0px ' + (lightBlur + lightAlt) + 'px ' + (lightSpread + lightAlt) + 'px #ffecb4');
      night = 1;
    } else {
      $('#night-css').remove();
      $('#light').hide();
      $('body').css('background', '#fff');
      $('#night-btn').html('🌞');
      night = 0;
    }
  }
});
$('#night-btn').mousedown(function(e) { //move with mouse
  initPos = [e.clientX, e.clientY];
  yoffset = $('#night-btn').offset().top - e.clientY;
  xoffset = $('#night-btn').offset().left - e.clientX;
  onmousemove = function(e) {
    yy = yoffset + e.clientY;
    xx = xoffset + e.clientX
    $("#night-btn").css({
      top: yy,
      left: xx
    });
    $("#light").css({
      top: yy + 12,
      left: xx + 11
    });
  };
});
$('#night-btn').mouseup(function(e) { //stop moving with mouse
  onmousemove = function() {};
});

$('#night-btn').mouseenter(function() { //change to face on hover
  scrollpos = $(window).scrollTop();
  $(window).off();
  $(window).on('DOMMouseScroll', function(e) {
    if (night) {
      $('body').css("overflow", "hidden");
      scroll = -e.originalEvent.detail;
      lightAlt += scroll * 0.4;
      lightAlt = Math.max(0, lightAlt);
      $('#light').css('box-shadow', '0px 0px ' + (lightBlur + lightAlt) + 'px ' + (lightSpread + lightAlt) + 'px #ffecb4');
    }
  });
  if (night) {
    $("#night-btn").html('🌝');
  } else {
    $("#night-btn").html('🌞');
  }
});
$('#night-btn').mouseleave(function() { //change...