Como agregar el modo oscuro a tu sitio webEn 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

Te sugiero seguir leyendo...

  • Autor:
  • Categorias: Diseño Web CSS3 html5 Html javascript WebSite webmasters Tutorial

Como agregar el modo oscuro a tu sitio web Como agregar el modo oscuro a tu sitio web...
Tutoriales en linea
¿Te gusta el tutorial?





Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!