Añadir modo oscuro con CSS en WordPress y totalmente gratis

Tiempo de lectura: 2 minutos

Hola, hoy vamos a aprender a añadir el modo oscuro en nuestro WordPress y usando solo CSS personalizado de nuestro tema.

Existen distintos plugins, que pueden generar un modo oscuro, pero todos ellos son de pago o limitados. Con este método vamos a aprender a añadir modo oscuro de forma automática y que se ajusta según el dispositivo tenga o no activado el modo oscuro. Además, solo usando CSS.

Lo primero que vamos a hacer es ir a Aparicencia:

Y pulsamos en Personalizar:

Ahora vamos a CSS adicional:

Aquí dentro podremos añadir el CSS que necesitemos para mostrar modo oscuro:

@media (prefers-color-scheme: dark) {

}

La expresión «@media (prefers-color-scheme: dark)» es una regla CSS que se utiliza para aplicar estilos específicos cuando el usuario tiene habilitado un esquema de color oscuro (modo oscuro) en su dispositivo o navegador.

Ahora tendremos que personalizar los elementos que necesitemos cambiar por ejemplo:

@media (prefers-color-scheme: dark) {
  body {
    color: #FDF9F9;
    background: #1E1E1E;
  }

  body a {
    color: #809fff;
  }
}

Hemos añadido el body en color oscuro y las letras del contenido en color blanco. También los links en color azul.

Ahora tendremos que ir inspeccionando los elementos que necesitemos y cambiando el color para ver cual de ellos se ajusta mejor. Algunos elementos interesantes son:

@media (prefers-color-scheme: dark) {
  body {
    color: #FDF9F9;
    background: #1E1E1E;
  }

  body a {
    color: #809fff;
  }

.site-header{
	background: #444444 !important;
}
	
.main-title a{
	color: #FDF9F9 !important;
}

.entry-title a{
	color: #FDF9F9 ;
}
	
.posted-on{
	color: #FDF9F9 ;
}
	
.entry-meta{
   color: #FDF9F9 ;
}
	
.main-navigation, .main-navigation ul ul{
   background: #444444 ;
}
	
.main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items{
	   color: #FDF9F9 ;
	}
	
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header{
   background: #444444 ;
}
	
.widget {
	background: #444444 !important;
}
	
.comments-area{
	background: #444444 ;
}


.site-footer{
		background: #444444 !important;
}
	
.footer-widgets{
		background: #1E1E1E;
}

.site-info{
		background: #1E1E1E;
}

}

Hemos editado, la barra superior, footer, cards o elementos POST, distintos widgets…

Si necesitamos añadir más elementos, tendremos que inspeccionarlos y modificarlos por class.

Espero que te haya servido y no dudes en visitar la web regularmente para enterarte de nuevos trucos de programación.