En este tutorial les mostraremos la manera de agregar el modo oscuro a tu sitio web de una manera sencilla. Para ello dejaremos un HTML ya editado en la parte inferior de este tutorial.


Primero tendremos que agregar nuestro modo oscuro:

.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;
}

Luego el botón

   <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>

Y por ultimo nuestro JS

<script>/*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')
}</script>

Ver resultado