Categories
Articulo personal CSS Web Development WordPress

Personalizando el CSS de WordPress Soporte para Modo Oscuro y Claro

Ahora que comienzo mi blog personal decidí usar WordPress mas que nada por que no tenia ganas por el momento de reinventar la rueda y lo cierto es que como blog funciona a la perfección.

Aun así algo es claro y eso es; que el estilo CSS del tema por defecto no coincide con el de mi pagina web principal por tanto me decidí a investigar como editar el estilo css del tema de WordPress y ademas darle soporte para modo oscuro.

Es mas fácil editar el estilo desde CSS adicional en Apariencia > Temas > Personalizar > CSS adicional pero hay que estar inspeccionando los elementos para encontrar las clases por lo que es más fácil editarlo directamente desde el archivo css principal.

Para comenzar encontré que es posible editar el CSS del tema en Apariencia > Editor de temas

Al parecer al Inicio hay un indice de lo que contiene el archivo CSS principal ya que el cero se supone que es para reiniciar el estilo vamos a dejarlo tal y como esta.

Así que comienzo añadiendo mis constantes de colores

:root {
  --blacklc: #141619;
  --blacktwo: #212228;
  --blackthree: #1d1d21;
  --greelc: #69baa0;
  --bluelc: #589b99; 
}

Ahora esto hace que me marque errores en el código pero los ignoraremos por ahora.

para que nuestro sitio se adapte al modo oscuro o claro del dispositivo del usuario añadiremos estas dos etiquetas

@media (prefers-color-scheme: dark) {
	body {
		background: var(--blacktwo);
	}
}

@media (prefers-color-scheme: light) { 
	body {
		background: var(--greelc);
	}
}

Como puede verse he añadido mis dos constantes de color como fondo solo para probar si esta funcionado, así que ahora solo hay que hacer click en el botón actualizar archivo y recargar el sitio sin cache.

Modo claro
Modo oscuro

Ademas de editar el archivo CSS fue necesario editar un archivo php así que trate de elegir un color que funcionara tanto en modo oscuro como claro.

Ademas de editar el css fue necesario editar functions.php

Nota: al editar directamente en el editor del tema el css adicional que hagas quedara incrustado como una etiqueta style al principio del body del sitio así que tendrá prioridad.

Después de editar mi código tanto en personalizar tema como en archivo css principal y el php obtuve este resultado.

Antes de terminar me di cuenta me había faltado definir otro color para las categorías en el modo claro y no se veían por ser del mismo color que el del tema de fondo.

y por ultimo el toque final

power by WordPress & landercorp.mx

con eso ya queda listo mi blog para comenzar a narrar mis aventuras haciendo sitios WEB y aplicaciones en SwiftUI

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *