Modo Nocturno ¡POR FAVOR!

Implementador WordPress y VPS
Implementador WordPress y VPS
Modo Nocturno ¡POR FAVOR!
icon loader
/

En un principio fué por lo cómodo que es a la vista estar de noche con el modo nocturno habilitado… Pero he llegado al punto de usarlo hasta en el día porque me ayuda a enfocarme. Estaba buscando cómo implementarlo con WordPress y ha sido tan interesante que he decido hacer este episodio.

modo nocturno por favor
  • El modo oscuro ha ido ganando terreno en nuestros sistemas operativos
    • Linux
    • Wiindows
    • Mac
    • iOS
    • Android
  • Muchos sitios webs también tienen sus versiones para modo claro y modo oscuro
  • Por ejemplo DuckDuckGo
    • Que no solo se adapta a la configuración de tu sistema
    • También tiene seis temas para que podas personalizar tu experiencia
    • Cuando trabajo de noche
    • Y me toca buscar lo hago en DuckDuckGo
    • Porque el blanco intenso de Google me quema los ojos jajaja
  • YouTube, Dropbox, Slack, Notion, Facebook
  • Pero no solo las grandes empresas van creando sus versiones
  • Desde hace mucho tiempo me voy encontrando con sitio tan guapos como el de:
  • Interactivo, moderno, y con un botón que te permite habilitar el modo nocturno en su sitio web
  • Otro muy potente es MXB
  • Ejemplos como estos hay muchos…
  • Pero te estarás preguntando ¿por qué un modo nocturno?
    • Lo primero la experiencia del usuario
    • Si tiene el modo oscuro en su sistema operativo
    • Agradecerá entrar a un sitio acorde en lugar de la gran mancha blanca
    • Ayuda a los que tenemos fatiga visual
    • Permite que el usuario se concentre en la lectura
    • Ayuda a ahorrar energia
  • ¿Puedo usarlo en WordPress?
  • ¡Claro que si!
  • Existe muchos themes del repositorio que ya vienen listos para el Dark Mode
  • Estos themes ya vienen preparados para que el usuario active el modo que quiere usar
  • Peor también tenemos plugin que nos habilitan el modo oscuro a cualquier theme
    • Blackout: Dark Mode Widget
    • Lo instalas, activas
    • Y te crea un botón en tu web
    • Al dar clic cambia los colores a modo oscuro
    • Es fácil, es rápido, pero queda regular
    • Hace un negativo de los colores
    • Los textos se leen perfectos
    • Pero las imágenes se ven como si fueran negativos
blog oscuro
  • Podrias explorar hacerlo por vos mismo… Si te animas te dejo:
  • Otra opción que tenemos es con GeneratePress
    • Te comparto el post: Minimal Starter Template With Automatic Dark Mode
    • En el explican como se importa un plantilla que hace que GeneratePress tome de tu navegador la configuración
    • Y un poco de CSS que tenes que añadir en el personalizador
    • Si el navegador esta en modo oscuro
    • Lo activara en tu web
    • Queda muy bien
    • Pero algunas secciones de la web no las detecta y quedan “en modo claro”
generetePress claro
generetePress oscuro
  • Y lo mejor que he probado: El plugin Dark Mode for Elementor
    • Te añade dentro de Elementor la opción de habilitar un botón
    • Y el cambio a modo oscuro lo hace respetando los contrastes
    • Y no cambia las fotos
    • Solo las imágenes o vectores
    • Para que se adapte al diseño
dark mode elementor
  • Te comparto en avalos.sv/podcast
  • Las capturas de GeneratePress
  • Un GIF del plugin para Elementor
  • Y una captura de mi blog en modo nocturno usando el plugin

Yo soy usuario al 100% del modo oscuro y estoy desean como agua de mayo que se integre esto en el core. De momento tanto desarrolladores de themes como del core dicen que “no es algo que se necesite” vamos a ver si al pasar mi web a Elementor uso el plugin… Mis ojos lo agradecerían jejejeje

Si querés ponerte en contacto conmigo, podes escribirme en mi Formulario de contacto aquí en la web 😉

2 comentarios

  1. Muchas gracias por tu web y este artículo hermoso. Es extraño el mundo, pero justo hoy estaba buscando sobre dark mode en elementor/generatepress y encuentro tu post publicado hoy. Quería saber de paso, cuál es el micrófono que utilizas para los podcast, gracias.

    • Cesar muchas gracias por escuchar y por comentar. No hay duda que pasan cosas maravillosas cuando vas por el buen camino jejeje. Me alegra que te sea de utilidad el episodio.

      El micrófono, pues es un micrófono sencillo USB que compré en una tienda llamada Radio Shack y no tiene marca, pero un compañero tiene uno idéntico pero él lo compro en AliExpress le voy a pedir que me dé el nombre con el que el lo compro.

Deja un comentario