Day/Night switch

HTML

<div id="box">
    <p>Click for change mod</p>
    <input id="check" type="checkbox" />
</div>

JS/jQuery

$(document).ready(function(){
    $('#check').click(function(){
       $('#box').toggleClass('mod-night');
    });
    
    $('#copyText').click(function(){
        $('textarea').select();
    });
});

CSS

#box {
    position: relative;
    background: #fff;
    transition: .5s;
}
#box p {
    text-align: center;
    padding-top: 20px;
}
*:focus {
    outline: none;
}
#check {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 80px;
    background: #ffffff;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    border: 8px solid #666;
    box-sizing: border-box;
    box-shadow: inset 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.5);
    border-radius: 50px;
    transition: .5s;
}
#check:before {
    content: '';
    width: 65px;
    height: 65px;
    background: #666;
    background: linear-gradient(to bottom, #666,#666,#666,#333,#333,#333);
    border-radius: 50%;
    box-shadow: 0 0 5px #000;
    position: absolute;
    top: 0;
    left: 0;
    transition: .5s;
}
#check:after {
    content: '';
    width: 4px;
    height: 4px;
    background: #666;
    position: absolute;
    top: 50%;
    left: 40%;
    border-radius: 50%;
    transition: .5s;
    transform: translate(-50%, -50%);
}
#check:checked {
    background: #26c62c;
    box-shadow: inset 0 0 5px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.5), 0 0 20px rgba(38, 198, 44, .8);
}
#check:checked:before {
    left: 67px;
}
#check:checked:after {
    left: 90%;
    background: #26c62c;
    box-shadow: 0 0 5px #26c62c, 0 0 3px #26c62c;
}
.mod-night {
    background: #333 !important;
    color: #fff;
}

Day/night switch