Dark Mode Button

CODE

HTML

<div class="theme-button">
    <div class="Light-Dark-Button">
        <span class="selector"></span>
        <span class="sun"></span>
        <span class="moon"></span>
    </div>
</div>

CSS

.theme-button {
    width: 195px;
    height: 90px;
    border-radius: 90px;
}

.Light-Dark-Button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 3px solid #000;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 90px;
    position: relative;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    transition: .3s;
}

.Light-Dark-Button.ative {
    border: 3px solid #f4f4f4;
}

.Light-Dark-Button:hover, .Light-Dark-Button:hover {
    cursor: pointer;
    transform: scale(1.02); /* if you want it bigger when mouse is over */
}

.Light-Dark-Button .selector {
    content: "";
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 5px;
    left: 5px;
    transition: .3s;
    z-index: 3;
}

.Light-Dark-Button .selector.activate {
    background-color: #f4f4f4;
    left: 109px;
}

.Light-Dark-Button .moon {
    display: none;
    content: "";
    width: 74px;
    height: 74px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 6px;
    box-shadow: inset -23px -7px 0 #958300;
    transition: .3s;
}

.Light-Dark-Button .moon.act {
    display: inline;
}

.Light-Dark-Button .sun {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background-color: #ffc400;
    box-shadow: 0 0 13px rgba(255, 196, 0, 0.803);
    transition: .3s;
}

.Light-Dark-Button .sun.act {
    display: none;
}

JAVASCRIPT

const light_dark_button = document.querySelector('.Light-Dark-Button');

light_dark_button.addEventListener('click', ()=>{
    const selector = document.querySelector('.selector');
    const sun = document.querySelector('.sun');
    const moon = document.querySelector('.moon');
    const button = document.querySelector('.Light-Dark-Button');

    selector.classList.toggle('activate');

    button.classList.toggle('ative');
    sun.classList.toggle('act');
    moon.classList.toggle('act');
});