Nightmode switcher

Nightmode Switcher.html

 <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                       Nightmode switcher
                    </a>
                </li>
                <li>
                    <a href="#"><label class="switch">
  <input type="checkbox" id='daynight' value='off'>
  <span class="slider round"><i class="fas fa-sun"></i> <i class="fas fa-moon"></i></span>
</label></a>
                </li>
               
            </ul>
        </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>Lorem ipsum</h1>
                        <p>TLorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci nulla, condimentum at auctor a, fermentum malesuada quam. Duis nec metus vitae mauris hendrerit fringilla vel sit amet ligula. Nam eget mi ac urna varius aliquet a quis felis. Etiam tempor, nunc eget convallis dignissim, turpis sapien dapibus libero, scelerisque viverra ipsum erat id ipsum. Phasellus vitae urna nisi. Phasellus dictum cursus erat eget tristique. Curabitur tempor ullamcorper lacus, sit amet aliquet nibh. Aenean at justo ut diam commodo semper. Suspendisse tempus eros eget leo posuere, in imperdiet ipsum blandit. Sed consectetur viverra purus non mollis. Sed faucibus diam non nisl auctor pellentesque. Fusce quis nunc sit amet nisl facilisis auctor. Mauris fermentum dui sed ultrices pulvinar. Suspendisse justo velit, rutrum nec sollicitudin quis, porttitor at risus. Curabitur gravida aliquam purus sed efficitur.

Quisque dictum nisi dapibus urna ultrices, non placerat tellus faucibus. Proin eu rutrum turpis, id eleifend mi. Integer suscipit dui at magna gravida, id ultricies neque egestas. Nunc quis facilisis massa, eget volutpat libero. Duis pharetra sit amet est feugiat semper. Aliquam erat volutpat. Maecenas nunc sapien, posuere at rhoncus quis, molestie tempor diam. Morbi sagittis turpis molestie volutpat feugiat.

Fusce sit amet neque et elit iaculis rutrum. Nunc blandit sed purus ac imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce maximus nunc in est placerat vestibulum. Cras ultrices sodales nisi, et malesuada odio viverra id. Vestibulum quam nibh, fermentum non leo quis, vehicula tempor arcu. Proin semper sit amet metus non porta. Vestibulum non erat sem.

Sed bibendum vestibulum libero a aliquam. Fusce finibus consectetur urna, nec malesuada augue cursus scelerisque. Curabitur justo dolor, consequat eget aliquet non, lobortis et nisl. Nam vitae finibus lorem, a fringilla velit. Aenean quis mauris quis tellus convallis ultrices ac at nunc. Curabitur rhoncus ex quis ultrices egestas. Mauris iaculis egestas lacus, fermentum interdum tortor lobortis at. Quisque blandit quis mi nec lacinia. Quisque est nulla, pulvinar vitae elit in, hendrerit feugiat nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus bibendum risus ut gravida. Mauris porttitor velit ut nisl convallis, a mollis urna consequat. Integer at tellus leo. Phasellus malesuada libero et convallis viverra. Vestibulum velit nulla, viverra ac varius vitae, imperdiet vitae magna. </p>
<p>
Cras vestibulum magna vel felis dignissim, eget fermentum nibh dictum. In in ligula eget purus molestie vehicula. Curabitur erat ipsum, iaculis pharetra luctus vel, vehicula nec justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit felis quis aliquam vehicula. Nulla facilisi. Maecenas lorem purus, sollicitudin malesuada gravida ut, posuere a neque. Pellentesque sit amet dui nec tortor sodales varius vitae at libero. Integer in odio eleifend, mollis tellus nec, sagittis turpis. Sed placerat diam non vulputate dignissim. Sed interdum dui nec est consequat cursus. Cras quis nisl sit amet dolor sodales tristique. Vestibulum et turpis ligula. Donec a nulla dolor. Pellentesque consequat ligula id risus ultrices tempor. Nulla sit amet lectus cursus, interdum ipsum ac, auctor dolor.</p>
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>

nightmode-switcher.markdown

Nightmode switcher

A Pen by Vasilii V on CodePen.

License.

script.js

document.getElementById('daynight').addEventListener('change', () => {

  if (document.getElementById('daynight').value === 'off')  {
    document.body.style.background = 'black';
    document.getElementById('daynight').value = 'on';
    document.body.style.color = 'white'; 
  } else {
    document.getElementById('daynight').value = 'off';
document.body.style.background = 'white';
 document.body.style.color = 'black'; 
  }  
  
})

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.3.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>

style.css

/*!
 * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Toggle Styles */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

.fa-sun { float: left; flex: 0 0 30px; }
.fa-moon { float: right; flex: 0 0 55px; } .switch { position: relative; display: flex; width: 60px; height: 34px; } 
.switch input { opacity: 0; width: 0; height: 0; } 
.slider { display: flex; align-items: center; justify-content: center; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: green; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: red; } input:focus + .slider { box-shadow: 0 0 1px green; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } /* Rounded sliders */ .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />