• HTML
• CSS
• JS

HTML

<button class="switch" id="switch">
    <span class="icon-sun-1"></span>
    <span class="icon-moon-2"></span>
</button>

<div class="container">
    
    <div class="container-box">
        <span class="icon-tags"></span>
        <h1 class="title">Contenido nocturno</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </div>
    
</div>

CSS

body{
    font-family:sans-serif;
    color:#17202a;
}
body.dark{
    background:#17202a;
    transition:.3s ease all;
    color:#ddd;
}

.switch{ 
    background:#343d5b;
    border-radius:1000px;
    border:none;
    position:relative;
    cursor:pointer;
    display:flex;
    outline:none;
}
.switch:after{
    content:"";
    display:block;
    width:30px;
    height:30px;
    position:absolute;
    background:#f1f1f1;
    top:0;
    left:0;
    right:unset;
    border-radius:50%;
    transition:.3s ease all;
    box-shadow:0px 0px 2px 2px rgba(0,0,0,.2);
}
.switch span{
    width:30px;
    height:30px;
    line-height:30px;
    display:block;
    background:none;
    color:#fff;
}
.switch.active{
        background:orange;
        color:#000;
}
.switch.active:after{
    right:0;
    left:unset;
}

/* agregamos contenido */

.container{
    width:100%;
    display:flex;
    justify-content:center;
}
.container-box{
    width:400px;
    margin-top:4rem;
    padding:2rem 1rem;
    background:#f1c40f;
    border-radius:0.3rem;
    text-align:center;
    box-shadow:1px 1px 10px rgba(0,0,0,0.3);
}
.dark .container-box{
    background:#283747;
}
.container-box .icon-tags{
    font-size:3rem;
}
.dark .container-box .title{
    padding:0.5rem 0rem;
    border-radius:25%;
    background:rgba(0,0,0,0.2);
}

JS

const btnSwitch = document.querySelector('#switch');

btnSwitch.addEventListener('click',() => {
    
    document.body.classList.toggle('dark');
    btnSwitch.classList.toggle('active');
    
});