Dark Mode

Dark Mode using CSS, Javsacript & HTML

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
<div class='container-fluid'>
  <div class="row row-bg">
    <div class="col-md ">
      <span class="firstcolumn">
        Web Techies
      </span>
    </div>
    <div class="col-md">
      <div class="float-right">
        <input type="checkbox" id="knob">
      </div>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md">
      <div class="all">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
        </p>
      </div>
    </div>
  </div>
</div>

CSS

.row-bg {
  background-color: #e2e2e2;
  height: 40px;
  
}

.firstcolumn {
  padding-top: 5px;
  color: darkgoldenrod;
  font-weight: bold;
}
#knob{
    -webkit-appearance: none;
    appearance: none;
    height: 25px;
    width: 55px;
    background-color: darkorange;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
    margin-top: 5px;
}
#knob:after{
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    background-color: #ffffff;
    top: 3px;
    left: 7px;
    border-radius: 50%;
}

p{
    line-height: 35px;
    padding: 10px;   
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    width: 550px;
    margin:0px auto;
}

/* Dark Mode */

.dark-mode{
    background-color: darkred;
    color: #e5e5e5;
}
.dark-mode #knob{
    background-color: darkorange;
}
.dark-mode #knob:after{
    background-color: black;
    top: 4px;
    left: 31px;
}
.dark-mode .row-bg {
  background-color: black;
}

JavaScript

document.getElementById("knob").addEventListener("click", function() {
  document.getElementsByTagName('body')[0].classList.toggle("dark-mode");
});