Crear modo nocturno en una web

Muchas aplicaciones y webs conocidas, como twitter y facebook, cuentan con modo nocturno que se cambia manualmente por el usuario o a una cierta hora del día, para aliviar la fatiga de la vista.

En este artículo aprenderemos a añadir a una web un botón que haga este efecto. Para ello, he creado una web muy básica, dónde por defecto, predominará el color blanco pero añadiendo un botón, el usuario podrá cambiarlo por una vista oscura.

Código HTML de la web:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nigmacode designs</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
    <div id="page" class="wrapper">
        <div class="container-fluid">
            <div class="row text-center">
              <div class="col-12">
                <h1 id="nameweb" class="name-web">nigmacode designs</h1>
              </div>
              <div class="row sections">
                <div class="col-4">
                  <div class="card">
                      <h2>Proyects</h2>
                      <img src="img/1.jpg" alt="1">
                  </div>
                </div>
                <div class="col-4">
                  <div class="card">
                      <h2>About us</h2>
                      <img src="img/2.jpg" alt="1">
                  </div>
                </div>
                <div class="col-4">
                  <div class="card">
                      <h2>Blog</h2>
                      <img src="img/3.jpg" alt="1">
                  </div>
                </div>
                <div class="col-12">
                  <div class="btn-contact">Contact</div>
                </div>
              </div>
            </div>
        </div>
    </div>
</body>

    <script src="index.js"></script>
</html>

CSS de la web:

*{
    font-family: 'Bungee', cursive;
}
body, html{
    height: 100%;
    margin:0;
}
.wrapper{
    height: 100%;
    background-color:white;
}
.name-web{
    margin-top:3rem;
    font-size: 4rem;
}
.content{
    position:absolute;
    top:60%;
    left:50%;
    width:90%;
    text-align: center;
    transform: translate(-50%, -50%);
}
.card{
    display: inline-block;
    margin:20px;
    border: 1px solid rgb(207, 207, 207);
    background-color:white;
    border-radius: 5px;
    overflow: hidden;
    transition: background-color .5s;
}
.card h2{
    font-size: 1.5rem;
}
img{
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.btn-contact{
    margin: 0 auto;
    text-align:center;
    border-radius:5px;
    width:150px;
    border:1px solid gray;
    cursor:pointer;
    transition: background-color .5s;
    margin-top:2rem;
}
.sections{
  position:absolute;
  top:50%;
  left:50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

Y ésta sería la web:

Añadiendo botón modo oscuro para web

Iremos al HTML de nuestra web, dónde añadiremos un botón con dos iconos, un sol (modo blanco) y una luna (modo oscuro).

<div class="container-btn-mode">
   <div id="id-sun" class="btn-mode sun active">
      <i class="fas fa-sun"></i>
   </div>
   <div id="id-moon" class="btn-mode moon">
      <i class="fas fa-moon"></i>
   </div>
</div>

Los iconos los obtendremos de la librería fontAwesomeIcon, que podemos utilizarla añadiendo la CDN en la cabecera de nuestra web:

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

Vamos al CSS y añadimos estilo a nuestro botón:

.container-btn-mode{
  position: absolute;
  top:20px;
  right: 30px;
  cursor: pointer;
  z-index: 2;
  font-size:0;
}
.btn-mode{
  display: inline-block;
  width: 50px;
  height: 30px;
  border:2px solid black;
  transition: background-color .5s;
}
.btn-mode i {
  display: block;
  font-size: 17px;
  text-align: center;
  line-height: 30px;
}
.btn-mode.sun{
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-right: 1px solid transparent;
}
.btn-mode.moon{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.active{
  background-color:black;
  color:#ffcd5c !important;
}

Y de ésta forma colocariamos el botón en la parte derecha superior de nuestra pantalla, y tendría el siguiente aspecto:

Estilo modo oscuros para la web

Antes de ponernos con la funcionalidad de nuestro botón, necesitamos crear los estilos que obtendrá nuestra web cuando cliquemos en el modo oscuro de nuestro botón. Para ello, crearemos un estilo que modificará todos los elementos de nuestra web cuando se aplique:

.dark-mode{
  background-color: #0e0e0e;
  transition:background-color .5s;
}
.dark-mode .card{
  background-color: #1A1C1E;
}
.dark-mode h1, .dark-mode h2, .dark-mode .btn-contact{
  color:white;
}
.dark-mode .btn-mode{
  background-color:#1A1C1E;
  border:1px solid white;
  color:white;
}

Cambiando modo de nuestra web con el botón

Por último, lo que debemos hacer es añadirle funcionalidad a nuestro botón, para que cuando cliquemos en un modo, añada o elime el estilo dark-mode a nuestra web. Iremos al archivo javascript que hemos añadido al final del body del html de nuestra web y añadiremos éste código:

/*Si clicamos en el botón del sol, borrarémos la clase css dark-mode del div 
con id page y se aplicará el estilo active al sol*/
document.getElementById('id-sun').onclick = function(){
  document.getElementById('page').classList.remove('dark-mode')
  document.getElementById('id-moon').classList.remove('active')
  this.classList.add('active')
}
/*Si clicamos en el botón de la luna, añadiremos la clase css dark-mode del div 
con id page y se aplicará el estilo active a la luna*/
document.getElementById('id-moon').onclick = function(){
  document.getElementById('page').classList.add('dark-mode')
  document.getElementById('id-sun').classList.remove('active')
  this.classList.add('active')
}

Modo nocturno en la web

Hecho esto, ya tendríamos funcionando nuestro botón, y al darle a la luna, este sería el aspecto de nuestra web: