Aprende a mostrar imágenes diferentes en GitHub según el tema claro u oscuro, ideal para logos de empresa y proyectos. Aquí se explican dos métodos prácticos que funcionan bien en README de GitHub, junto con consejos para evitar errores comunes y cómo Q2BSTUDIO puede ayudarte a implementar soluciones a medida.
Método 1 – Fragmento específico de GitHub: GitHub ofrece una solución nativa en Markdown que consiste en añadir un fragmento al final de la URL de la imagen. Se usan dos imágenes separadas y el frontend de GitHub muestra la adecuada según el tema. Los fragmentos son #gh-light-mode-only y #gh-dark-mode-only. En la práctica se colocan dos enlaces de imagen en la misma línea, por ejemplo:  .
Ventajas del método 1: es puro Markdown, no requiere HTML y mantiene el README limpio; la sintaxis es sencilla y fácil de recordar. Inconvenientes: es una función propietaria de GitHub y no funcionará igual en plataformas como GitLab o Bitbucket, ni en muchos generadores de sitios estáticos.
Método 2 – Usar la etiqueta picture y prefers-color-scheme: para una solución estándar web más universal se puede insertar HTML directamente en Markdown usando la etiqueta picture. La idea es definir un source con media=(prefers-color-scheme: dark) y un elemento img de fallback para tema claro u otros clientes. Ejemplo conceptual: picture con source media=(prefers-color-scheme: dark) srcset=https://ruta/a/imagen-dark.png y un img alt=Texto src=https://ruta/a/imagen-light.png como fallback.
Ventajas del método 2: al ser un estándar web funciona en navegadores modernos y en cualquier plataforma que permita HTML en Markdown; además es más flexible para añadir variantes por tamaño, formato o más temas. Inconvenientes: introduce HTML en el README y puede aumentar la verbosidad del archivo si se usan muchas imágenes.
Errores comunes a tener en cuenta: caché del navegador que impide ver el cambio al probar, por lo que conviene recargar con hard refresh o probar en ventana privada; y plataformas que no soportan el fragmento de GitHub mostrarán ambas imágenes apiladas, por lo que hay que documentar o adaptar según el público del README.
Recomendaciones prácticas: mantener versiones optimizadas de las imágenes en formatos web como PNG o WebP, nombrar archivos indicando light o dark para facilitar gestión, y usar una estrategia de despliegue que evite cachés persistentes cuando actualices activos. Para logos de empresa considera versiones con fondos transparentes y variantes con bordes o sombras sutiles para visibilidad en ambos temas.
Sobre Q2BSTUDIO: somos una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial, ciberseguridad y servicios cloud aws y azure. En Q2BSTUDIO desarrollamos software a medida y aplicaciones a medida para clientes que necesitan soluciones personalizadas, implementamos proyectos de inteligencia artificial y ofrecemos servicios inteligencia de negocio y power bi para mejorar la toma de decisiones. También trabajamos en ia para empresas, agentes IA y arquitecturas seguras en la nube.
Cómo podemos ayudar: si necesitas integrar en tu README o en la documentación de tu producto una solución profesional para temas claro y oscuro, o si buscas desarrollar aplicaciones a medida, soluciones de software a medida, proyectos de inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, agentes IA o implementaciones de power bi, en Q2BSTUDIO contamos con experiencia y casos reales que podemos adaptar a tu empresa.
Referencias y recursos adicionales: changelog de GitHub sobre especificar contexto de tema para imágenes en Markdown en https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/ y guía práctica en https://github.blog/developer-skills/github/how-to-make-your-images-in-markdown-on-github-adjust-for-dark-mode-and-light-mode/.
Contacto: puedes encontrarnos en linkedin en linkedin.com/company/q2bstudio o en github en github.com/q2bstudio o en X en x.com/q2bstudio. Si prefieres, envía un mensaje directo y en Q2BSTUDIO te asesoramos sobre la mejor estrategia para tus imágenes, tu README y tus proyectos de software a medida e inteligencia artificial.
