Introducción

En este tutorial para WordPress describo con todo lujo de detalles varias técnicas para hacer que el logo de tu sitio cambie de color cuando el usuario activa el modo oscuro. Cubriré soluciones puramente con CSS (aprovechando prefers-color-scheme y variables), técnicas para imágenes raster (PNG/JPG), soluciones ideales con SVG (inline y externo), alternativas con filtros CSS, y cómo integrarlo correctamente en WordPress (Customizer, child theme, y filtro de logo). También incluyo fragmentos de código listos para usar y recomendaciones de accesibilidad y rendimiento.

Panorama: ¿Por qué hay varias técnicas?

No existe una solución universal porque los logos pueden ser:

• Imágenes raster (PNG/JPG) incrustadas como ltimggt o fondo.
• SVG externo cargado vía ltimggt o ltobjectgt.
• SVG inline embebido en el HTML (la opción más flexible).
• Logos como fuente o máscara CSS.

Cada caso tiene sus ventajas y limitaciones para cambiar color mediante CSS. A continuación explico las técnicas recomendadas según el caso y muestro ejemplos listos para copiar.

1) Método ideal: SVG con fill usando currentColor (recomendado)

Si puedes usar SVG inline o un SVG que utilice currentColor para los rellenos, cambiar el color del logo es tan simple como cambiar la propiedad color del contenedor. Esta es la técnica más accesible y con mejor rendimiento y control.

SVG preparado (ejemplo mínimo)

CSS usando prefers-color-scheme

/ Color por defecto (modo claro) /
.site-logo { color: #111 }

/ Modo oscuro detectado por el sistema /
@media (prefers-color-scheme: dark) {
  .site-logo { color: #fff }
}

/ Alternativa: cuando el tema añade una clase dark-mode a html o .site /
.dark-mode .site-logo { color: #fff }

Coloca el SVG inline dentro del contenedor .site-logo o enlaza un SVG externo que utilice currentColor (si se carga con ltimggt no siempre podrás aplicar currentColor al interior a menos que el SVG esté preparado para ello o sea inline).

2) SVG externo cargado como ltimggt — solución con CSS variables o filtros

Si no puedes usar inline SVG (por ejemplo, el logo viene del custom logo de WordPress y está como archivo), hay dos formas:

1. Servir dos versiones del SVG (claro/oscuro) y cambiar el src con CSS/JS.
2. Usar filtros CSS para invertir/modificar color (menos preciso).

Ejemplo: cambiar el src con CSS (con ayuda de atributos data o de la clase dark-mode)

/ JavaScript que intercambia el src cuando detecta modo oscuro (ejemplo simple) /
(function(){
  function applyLogoForDark(isDark){
    document.querySelectorAll(.site-logo-img).forEach(function(img){
      var darkSrc = img.getAttribute(data-dark)
      var lightSrc = img.getAttribute(data-light)  img.getAttribute(src)
      if(isDark  darkSrc){
        img.src = darkSrc
      } else {
        img.src = lightSrc
      }
    })
  }

  // Detectar prefers-color-scheme
  var media = window.matchMedia((prefers-color-scheme: dark))
  applyLogoForDark(media.matches)
  media.addEventListener(change, function(e){ applyLogoForDark(e.matches) })

  // Si tu tema añade una clase .dark-mode al html, también puedes observar cambios de clase
})()

Este enfoque es compatible con navegadores que soportan matchMedia y es seguro para WordPress si encolas el script correctamente.

Ejemplo: usar filtros CSS para imágenes raster o SVG

Los filtros pueden invertir y ajustar colores, útil para PNG/JPG sin crear variantes. No ofrece control de color exacto, pero a menudo es suficiente.

/ Imagen por defecto /
.site-logo-img { filter: none transition: filter .25s ease }

/ Modo oscuro: invertir y ajustar brillo/tonos /
@media (prefers-color-scheme: dark) {
  .site-logo-img {
    filter: invert(100%) brightness(1.05) saturate(80%)
  }
}
/ Ajuste alternativo si el tema usa clase .dark-mode:
.dark-mode .site-logo-img { filter: invert(100%) brightness(1.05) saturate(80%) }
/

3) PNG o JPG: usar versión alternativa o CSS blend/mask

Para imágenes raster la opción más fiable es generar una versión alternativa (blanca o de alto contraste) y alternar las fuentes con JS o mediante CSS si usas background-image y el tema cambia clases.

/ Fondo con dos imágenes y cambio por clase /
.site-branding { background-image: url(/wp-content/uploads/logo-light.png) background-repeat: no-repeat background-size: contain width: 200px height: 40px }

.dark-mode .site-branding { background-image: url(/wp-content/uploads/logo-dark.png) }

Otra técnica más avanzada es usar mask-image con un PNG monocromático y pintar con background-color funciona bien cuando el logo es una silueta.

/ Usando máscara SVG o PNG (logotipo en blanco sobre transparencia) /
.site-logo-mask {
  -webkit-mask-image: url(/wp-content/uploads/logo-mask.svg)
  mask-image: url(/wp-content/uploads/logo-mask.svg)
  background-color: #111 / color del logo en modo claro /
  width: 200px height: 40px
}
.dark-mode .site-logo-mask { background-color: #fff }

4) Integración con WordPress — dónde añadir el CSS/JS

Tienes varias opciones para integrar los cambios en WordPress:

• Customizer → CSS adicional: rápido para CSS simples con prefers-color-scheme.
• Child theme: añadir CSS/JS en style.css o encolar scripts desde functions.php.
• Encolar un script que gestione el intercambio de src o la detección de tema oscuro personalizado.
• Modificar get_custom_logo o usar filtros para inyectar atributos data-dark/data-light en la etiqueta ltimggt generada por WordPress.

Ejemplo: encolar script y CSS en functions.php (child theme)

Ejemplo: añadir data-dark al logo usando filtro get_custom_logo

Este fragmento añade un atributo data-dark con la URL de la versión oscura si existe (puedes personalizar cómo obtener esa URL — por ejemplo, usando un campo personalizado o un ajuste en el Customizer).

5) Detección del modo oscuro: prefers-color-scheme vs clase del tema

Hay dos fuentes de verdad comunes:

• prefers-color-scheme: detecta la preferencia del sistema del usuario. Útil y sin JS.
• Clase del tema (ej. .dark-mode o .is-dark): el tema o un plugin añade la clase cuando el usuario activa manualmente el modo oscuro. Requiere que tu CSS apunte a esa clase o que uses JS para detectar el cambio.

Combina ambos: define estilos con prefers-color-scheme para cobertura automática y también soporta la clase .dark-mode para cuando el tema gestiona el modo.

6) Accesibilidad, rendimiento y consideraciones SEO

• Alt text: mantén siempre el atributo alt en ltimggt para accesibilidad y SEO.
• Inline SVG mejora la accesibilidad (puedes añadir lttitlegt y ltdescgt) y permite controlar colores con CSS.
• Evita cambios que oculten contraste: asegúrate de que el logo tenga suficiente contraste en ambos modos para cumplir WCAG mínimamente.
• Carga eficiente: si usas variantes de imagen, evita descargar ambas en paralelo sirve la alternativa solo cuando sea necesario o usa lazy-loading/JS para cambiar src cuando se detecte modo oscuro.
• Caching: si tu método modifica la URL del logo, ten en cuenta caches (CDN) y versiones para asegurar que la imagen correcta se sirva a los usuarios.

7) Flujos de trabajo recomendados según el caso

1. Si puedes controlar el logo y convertirlo a SVG: usa SVG inline con fill=currentColor y cambia color vía CSS. Es la mejor opción.
2. Si tienes SVG pero no inline: sirve dos archivos SVG y cambia el src con data attributes JS, o mantiene dos reglas CSS si el logo se usa como background-image.
3. Si solo tienes PNG/JPG: crea una versión alternativa (oscura/blanca) y alterna con background-image o intercambia el src con JS. Como alternativa limitada, usa filter: invert() con ajustes.
4. Si tu theme/plugin añade una clase .dark-mode: aprovecha esa clase en CSS para intercambiar colores o imágenes sin JS.

8) Ejemplo de implementación completa (SVG inline soporta sistema y clase)

HTML (ejemplo de plantilla):

/ Estilos base /
.site-logo { display: inline-block color: #1a1a1a transition: color .2s ease }

/ Soporta preferencia del sistema /
@media (prefers-color-scheme: dark) {
  .site-logo { color: #ffffff }
}

/ Y si el tema añade una clase manual /
.dark-mode .site-logo { color: #ffffff }

9) Últimos consejos profesionales

• Usa herramientas de diseño para exportar SVG limpios (optimiza con SVGO) y asegúrate de no tener fills hardcodeados que impidan currentColor.
• Prueba en navegadores y en modo oscuro manualmente (devtools y ajustes del sistema) para verificar contraste y nitidez.
• Si usas WordPress y un constructor (Elementor, Gutenberg block, etc.), revisa cómo ese constructor imprime el logo: a veces internamente mete el SVG como ltimggt y necesitarás adaptar la técnica.
• Documenta la ubicación de las variantes (por ejemplo, guardar logo-dark.svg en la media library) y crea un ajuste en el Customizer si quieres permitir al cliente seleccionar los dos archivos desde el panel.

Conclusión

El mejor enfoque es usar SVG con currentColor y controlar color vía CSS (prefers-color-scheme y/o clase .dark-mode). Cuando eso no sea posible, alternar src, usar máscaras o filtros son alternativas válidas. En WordPress integra la solución en el child theme, mediante filtros para get_custom_logo o encolando scripts, y asegúrate de mantener la accesibilidad y optimización del rendimiento.