Modo oscuro WordPress: botón, memoria y límites

En pocas palabras: Para crear un botón de modo oscuro en WordPress, usá la skill gratuita Dark Mode Toggle de Beaver Builder AI, publicada el 15 de octubre de 2026: arma paletas clara y oscura, sigue prefers-color-scheme en la primera visita y guarda la elección del visitante en localStorage.

El modo oscuro WordPress con botón incluido se puede armar con la skill gratuita Dark Mode Toggle, que Beaver Builder presentó en su blog el 15 de octubre de 2026. En la primera visita respeta la preferencia del dispositivo y después guarda la elección del visitante en el navegador.

Un modo oscuro en WordPress es una versión del sitio con fondos oscuros y texto claro, que el visitante activa a mano o que aparece sola según la configuración de su dispositivo. Se arma con dos juegos de colores, la media query CSS prefers-color-scheme para detectar la preferencia del sistema y localStorage para recordar la elección. El botón (toggle) deja que el visitante cambie de modo cuando quiera.

¿Cómo decide el sitio si muestra el modo claro o el oscuro?

El sitio sigue un orden de prioridad: si el visitante ya eligió con el botón, gana esa elección; si no, se usa la preferencia que reporta el navegador con prefers-color-scheme. Así lo describe la guía de Beaver Builder, que aclara que la selección guardada pasa por encima de la configuración del dispositivo.

• Primera visita: el sitio lee la preferencia del sistema. Según MDN, prefers-color-scheme tiene dos valores, light y dark, y light también cubre a quien no expresó ninguna preferencia. Es una función Baseline, disponible en los navegadores desde enero de 2020.
• Cuando toca el botón: el script guarda la elección con localStorage, que según MDN persiste entre sesiones y no tiene vencimiento.
• Visitas siguientes: manda lo guardado, no el sistema.

Eso sí: la memoria tiene límites. MDN documenta que localStorage puede lanzar un SecurityError si el navegador está configurado para no guardar datos (por ejemplo, si el usuario bloquea cookies), que en navegación privada se borra al cerrar la última pestaña privada y que un sitio en http y el mismo en https tienen almacenes distintos.

Ponele que migrás de http a https después de lanzar el toggle: los visitantes que ya habían elegido arrancan de cero. Eso es inferencia mía a partir de lo que dice MDN, no un caso documentado.

¿Qué es la skill Dark Mode Toggle de Beaver Builder AI y qué necesito para usarla?

La skill Dark Mode Toggle es un paquete gratuito de Beaver Builder que arrastrás a un chat de IA conectado por MCP; con eso, el agente arma un sistema de diseño con modo claro y oscuro, el botón y las páginas. Los datos salen del blog del fabricante, publicado el 15 de octubre de 2026, y no los probamos de forma independiente. Complementá con todo sobre la comunidad de WordPress.

• Colores compartidos: dos juegos de colores dentro de un design system, de modo que los fondos, textos, links y bordes conectados cambian juntos.
• Estilos del botón: vienen incluidos en la skill.
• Script de preferencias: detecta lo que reporta el navegador y recuerda la elección.
• Requisito técnico: Beaver Builder AI conectado por MCP a tu chat de IA.
• Requisito comercial: Beaver Builder AI viene con los planes Plus, Professional y Unlimited. La nota no trae precios, así que no los doy.

Conviene separar tres conceptos. Un design token es un valor con nombre (el color de fondo, el color de texto, el tamaño de un título); el design system junta esos tokens con estilos compartidos y criterios de diseño. En modo oscuro, el mismo token tiene dos valores: la fuente da el ejemplo de un fondo blanco en claro y carbón en oscuro. La skill es la receta que guía al agente para armar todo eso.

Mi opinión: lo más rescatable es la idea del token con dos valores. Te sirve aunque no uses Beaver Builder.

¿Cómo agregar un botón de modo oscuro en WordPress desde el header con Beaver Themer?

Creás el header una sola vez con Beaver Themer, le pedís al agente que incluya el toggle y que conecte sus colores al mismo design system, y asignás el header a todo el sitio o a páginas específicas. Así el botón queda junto al logo y la navegación, y los cambios futuros se hacen en un solo layout, según la guía de Beaver Builder.

1. Generá un style guide: pedile al agente que arme una guía de estilos para revisar las dos paletas y la tipografía antes de construir el resto.
2. Armá el header en Themer: se crea con el editor de Beaver Builder.
3. Pedí el toggle: que lo incluya en ese header y conecte sus colores al design system de las páginas.
4. Elegí la ubicación: sitio completo para un header compartido, o páginas puntuales.
5. Probá en un sitio de prueba: mirá cada página en los dos modos antes de tocar nada en producción.

Los módulos personalizados simplifican el armado de las páginas. El agente puede construir una sección completa con los estilos ya apuntando a los colores del design system, de modo que el fondo, el título, el borde y los links de una tarjeta siguen el tema sin conectar cada color a mano. El texto, los links y las imágenes siguen editables desde el panel del módulo.

Los módulos nativos también sirven, pero cada color hay que conectarlo. Un fondo fijo en blanco sigue siendo blanco aunque cambie el tema. Sobre eso hablamos en crear una landing page en WordPress.

¿Hay otras formas de agregar modo oscuro en WordPress, sin Beaver Builder?

Sí. La base técnica es la misma en cualquier setup: variables CSS, prefers-color-scheme y localStorage, las dos últimas documentadas por MDN. Lo que cambia es quién escribe el código, ya sea el agente de Beaver Builder, vos a mano o un plugin.

¿Cómo crear un botón de modo oscuro en WordPress sin plugin?

Con un par de variables CSS, un atributo en la etiqueta html y un script corto que lea y guarde la elección en localStorage. Ningún dato de este ejemplo viene de las fuentes: es un boceto propio, sin probar, armado con las APIs que documenta MDN.

/* CSS */
:root { --fondo: #ffffff; --texto: #1a1a1a; }
:root[data-tema="oscuro"] { --fondo: #16181d; --texto: #e8e8e8; }
body { background: var(--fondo); color: var(--texto); }

/* JS */
let guardado = null;
try { guardado = localStorage.getItem("tema"); } catch (e) {}
const sistema = window.matchMedia("(prefers-color-scheme: dark)").matches ? "oscuro" : "claro";
document.documentElement.dataset.tema = guardado || sistema;

document.querySelector("#toggle-tema").addEventListener("click", () => {
 const nuevo = document.documentElement.dataset.tema === "oscuro" ? "claro" : "oscuro";
 document.documentElement.dataset.tema = nuevo;
 try { localStorage.setItem("tema", nuevo); } catch (e) {}
});

El try/catch está por el SecurityError que menciona MDN. Mi suposición, sin medirla: si el script carga tarde, el visitante puede ver un destello del tema equivocado, así que lo mejor es cargarlo temprano en el head, por ejemplo desde un child theme.

¿Qué plugins gratis de modo oscuro hay para WordPress?

La guía de DonWeb nombra tres: WP Dark Mode, Dark Mode y Darklup. Ojo con la fecha: se publicó el 23 de octubre de 2024, casi dos años atrás, y se centra en el escritorio de administración. De WP Dark Mode cuenta que tiene opción de modo oscuro en el frontend, modo automático según el sistema y un botón flotante (Floating Switch Settings). Antes de instalar, revisá en el repositorio de plugins qué versión y qué funciones tiene hoy cada uno.

¿Qué cosas no cambian solas al activar el modo oscuro?

Todo lo que no esté conectado a los colores del tema: fondos fijos, widgets de plugins, formularios embebidos, iframes y fotos. Según Beaver Builder, el toggle cambia los elementos conectados al design system, y el resto usa sus propios estilos.

• Colores fijos: un fondo en blanco fijo queda blanco. Texto, fondos y bordes suelen necesitar colores que respondan al tema.
• Plugins, formularios e iframes: pueden traer sus estilos propios. Revisalos aparte en ambos modos y fijate si el proveedor tiene opción de modo oscuro.
• Fotos: no se recolorean. Dejás la misma o cargás una alternativa.
• Logos e ilustraciones: necesitan versión clara y oscura, o SVG inline que siga un color de texto compartido.
• Marca: no todo tiene que cambiar. Una muestra de color de marca puede quedar fija en los dos modos.

Un matiz técnico que la nota de Beaver no toca. MDN aclara que, para usar prefers-color-scheme dentro de un SVG, el archivo tiene que ir embebido como imagen y no inline en el HTML. El SVG inline con color de texto compartido es otro mecanismo, así que conviene saber cuál de los dos usa tu agente o tu theme (esto es lectura mía de ambas fuentes). Te puede servir nuestra cobertura de probar los cambios en un entorno staging.

Si el sitio ya existe, la fuente recomienda revisar los cambios en staging antes de aplicarlos a las páginas del cliente.

¿Qué está confirmado y qué no sabemos todavía?

Confirmado por las fuentes

• Beaver Builder publicó la guía el 15/10/2026 y la skill es gratuita.
• Usa prefers-color-scheme en la primera visita y localStorage para recordar la elección.
• Requiere Beaver Builder AI conectado por MCP y un plan Plus, Professional o Unlimited.
• Widgets de plugins, formularios embebidos e iframes no cambian solos.

Sin confirmar

• Cómo se comporta en sitios reales con caché, plugins pesados o themes de terceros: la fuente no lo informa.
• Si hay destello del tema equivocado al cargar, o cómo queda el contraste para accesibilidad.
• Precios de los planes y si Beaver Themer está incluido en cada uno: la nota no lo dice.

Un criterio de verificación como propuesta editorial (no sale de ninguna fuente): probá cuatro escenarios en staging. Sistema claro sin elección guardada, sistema oscuro sin elección guardada, elección guardada contraria al sistema y navegación privada con almacenamiento bloqueado. En cada uno, mirá el header, un formulario, un iframe y el logo.

¿Vale la pena ofrecer un toggle de modo oscuro en sitios de clientes?

Depende del sitio. Beaver Builder lo plantea como un extra que da control al visitante, con el ejemplo de una tablet de noche que encandila y de un dispositivo al sol donde una página oscura no se lee. Es un argumento razonable, pero viene de un tutorial del fabricante, así que probalo antes de prometérselo a un cliente. Lo complementamos en comparativa de plugins de autenticación en dos pasos.

Subirlo a un sitio existente es posible, ya que la skill puede revisar el design system y sumarle valores oscuros, siempre que revises los colores fijos. Ahora bien, si le vendés el extra a un cliente, te hacés cargo de que el formulario de contacto, el widget del plugin de reservas y el video embebido se vean bien en los dos modos, y ahí es donde aparece el trabajo que no se ve en la demo (la parte que el «agente» no resuelve solo). Cobertura relacionada: qué firewall protege mejor tu WordPress.

Para armar ese entorno de prueba, un hosting WordPress de Donweb sirve sin dramas para tener staging en Argentina.

Errores comunes

• Invertir todos los colores: la propia guía dice que el objetivo es elegir qué funciona en cada tema, no invertir todo. La marca puede quedar fija.
• Dejar colores fijos en los módulos: un fondo blanco fijo rompe la página en modo oscuro. Conectalo a un color que responda al tema.
• Dar por hecho que la elección se recuerda siempre: con almacenamiento bloqueado o pestaña privada, el visitante vuelve al valor del sistema.
• Olvidarse de lo embebido: iframes y formularios de terceros se revisan aparte.
• Copiar una guía vieja sin chequear: la de plugins que citamos es de 2024; verificá versiones antes de instalar.

Preguntas Frecuentes

¿Cómo agrego un botón de modo oscuro en WordPress?

Tenés tres caminos: la skill Dark Mode Toggle de Beaver Builder AI, un plugin como WP Dark Mode (que según la guía de DonWeb tiene un botón flotante) o un script propio con CSS y localStorage. Para el primero necesitás Beaver Builder AI conectado por MCP y un plan Plus, Professional o Unlimited. Relacionado: cómo arreglar enlaces rotos en tu sitio.

¿El modo oscuro de mi sitio puede seguir la configuración del celular o la compu?

Sí, con la media query prefers-color-scheme, disponible en los navegadores desde enero de 2020 según MDN. Si el visitante no expresó ninguna preferencia, el navegador informa el valor light.

¿Cómo hago para que WordPress recuerde si el visitante eligió modo oscuro?

Guardando la elección en localStorage, que según MDN persiste entre sesiones sin vencimiento. Se pierde si el visitante borra los datos, bloquea el almacenamiento o navega en modo privado, donde se limpia al cerrar la última pestaña privada.

¿Por qué algunos colores y plugins no cambian cuando activo el modo oscuro?

Porque el toggle solo cambia lo conectado a los colores del tema. Según Beaver Builder, un fondo fijo en blanco sigue blanco, y los widgets de plugins, formularios embebidos e iframes usan sus propios estilos. Revisalos aparte y buscá una opción de modo oscuro en el plugin o proveedor.

¿Puedo poner el botón de modo oscuro en el header de WordPress?

Sí, y Beaver Builder lo propone como lugar natural: se arma el header una vez con Beaver Themer y se asigna a todo el sitio o a páginas específicas. En otros themes también se puede editando el template del header, aunque eso ya no sale de las fuentes.

Conclusión

Lo nuevo es la skill de Beaver Builder del 15 de octubre de 2026; lo que importa, la lógica que explica: primero la elección guardada, después la preferencia del sistema. Esa lógica vale con o sin Beaver, porque se apoya en prefers-color-scheme y localStorage, dos funciones estándar documentadas por MDN.

Si querés ofrecerlo, probalo primero en un sitio de prueba con los cuatro escenarios de arriba y revisá a mano todo lo embebido. El resto es decisión tuya: la nota del fabricante muestra el camino, pero no responde cómo se comporta con tu caché, tus plugins y tu cliente.

Fuentes

• Beaver Builder – Create a Dark Mode Toggle in WordPress (15/10/2026)
• MDN – prefers-color-scheme, media feature de CSS
• MDN – Window: propiedad localStorage
• DonWeb – Beneficios de activar el modo oscuro en WordPress (guía de octubre de 2024)