<label class="dayNight">
    <input type="checkbox">
    <div></div>
</label>

<!-- dribbble -->
<a class="dribbble" href="https://dribbble.com/shots/5332195-Day-Night-Switch" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>

$night: #171C28;
$day: #fff;
$nightBtn: #fff;
$dayBtn: #5628EE;

body {
    transition: background .4s ease;
    background: $night;
    &.day {
        background: $day;
    }
}

.dayNight {
    cursor: pointer;
    input {
        display: none;
        & + div {
            border-radius: 50%;
            width: 36px;
            height: 36px;
            position: relative;
            box-shadow: inset 16px -16px 0 0 $nightBtn;
            transform: scale(1) rotate(-2deg);
            transition: box-shadow .5s ease 0s, transform .4s ease .1s;
            &:before {
                content: '';
                width: inherit;
                height: inherit;
                border-radius: inherit;
                position: absolute;
                left: 0;
                top: 0;
                transition: background .3s ease;
            }
            &:after {
                content: '';
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin: -4px 0 0 -4px;
                position: absolute;
                top: 50%;
                left: 50%;
                box-shadow: 0 -23px 0 $dayBtn, 0 23px 0 $dayBtn, 23px 0 0 $dayBtn, -23px 0 0 $dayBtn, 15px 15px 0 $dayBtn, -15px 15px 0 $dayBtn, 15px -15px 0 $dayBtn, -15px -15px 0 $dayBtn;
                transform: scale(0);
                transition: all .3s ease;
            }
        }
        &:checked + div {
            box-shadow: inset 32px -32px 0 0 $nightBtn;
            transform: scale(.5) rotate(0deg);
            transition: transform .3s ease .1s, box-shadow .2s ease 0s;
            &:before {
                background: $dayBtn;
                transition: background .3s ease .1s;
            }
            &:after {
                transform: scale(1.5);
                transition: transform .5s ease .15s;
            }
        }
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

$('.dayNight input').change(function() {
    $('body').toggleClass('day', $(this).is(':checked'))
});