Cómo agregar modo oscuro a tu sitio web de WordPress (forma fácil)

Agregar el modo oscuro a los sitios web de WordPress se ha convertido en un tema candente entre nuestros lectores. 🌙

No se trata solo de seguir tendencias: la investigación muestra que el modo oscuro puede reducir la fatiga visual para los lectores nocturnos y potencialmente ahorrar batería en dispositivos móviles.

A través de nuestra experiencia ayudando a miles de usuarios de WordPress a personalizar sus sitios, hemos descubierto las formas más eficientes de implementar esta función.

Si bien muchos propietarios de sitios asumen que requiere experiencia técnica, las herramientas modernas de WordPress lo han hecho mucho más accesible.💡

En esta guía, compartiremos la forma más sencilla de agregar el modo oscuro en WordPress. Hemos probado esta solución en varios temas y configuraciones para garantizar que sea confiable y fácil de agregar.

¿Qué es el modo oscuro y por qué agregarlo a tu sitio web?

Muchos dispositivos móviles y computadoras usan el modo oscuro para minimizar la cantidad de luz blanca que emite la pantalla. Esto puede reducir la fatiga visual, especialmente en condiciones de poca luz.

Algunas personas incluso creen que permite usar computadoras y dispositivos móviles hasta tarde en la noche sin que la luz blanca y azul arruine tu sueño.

Algunos dispositivos vienen con un modo nocturno incorporado que simplemente usa tonos de color más cálidos. Sin embargo, el modo oscuro en realidad agrega colores oscuros al fondo del dispositivo.

Algunos sitios web populares como YouTube ofrecen un esquema de color oscuro incorporado.

En computadoras de escritorio, puedes visitar sitios web en modo oscuro usando una extensión de Chrome como Night Eye.

Así es como se ve el sitio web de WPBeginner usando esa extensión:

Al agregar un interruptor de modo oscuro a tu sitio web, los usuarios pueden elegir el modo que prefieren sin tener que instalar una extensión especial del navegador.

Incluso puedes agregar el modo oscuro a tu área de administración de WordPress. Esto puede ser útil si trabajas en tu sitio por la noche o si sufres de fatiga visual.

Con esto en mente, veamos cómo puedes agregar el modo oscuro al front-end de tu sitio web de WordPress y al área de administración de tu sitio de WordPress.

Consejo: ¿Quieres usar un esquema de color oscuro, incluso cuando el dispositivo del visitante está en modo normal o diurno? Entonces consulta nuestra lista de los mejores temas oscuros para WordPress.

Cómo agregar modo oscuro a tu sitio web de WordPress

La forma más fácil de crear un modo oscuro para tu sitio web es usando WP Dark Mode.

Tras las pruebas, descubrimos que este plugin agrega un interruptor para que los visitantes puedan habilitar el modo oscuro en tu sitio web. Incluso puede agregar un interruptor al área de administración, para que puedas habilitar el modo oscuro para el panel de WordPress.

Puedes obtener más información al respecto en nuestra detallada reseña de WP Dark Mode.

Primero, deberás instalar y activar el plugin gratuito WP Dark Mode. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Después de la activación, visita la página WP Dark Mode » Ajustes desde el panel de WordPress y activa el interruptor 'Habilitar modo oscuro en el front-end' a 'ACTIVADO'.

Una vez que hagas eso, también puedes elegir un modo predeterminado para el frontend de tu sitio web. Después de eso, haz clic en el botón ‘Guardar Cambios’ para almacenar tu configuración.

A continuación, cambia a la pestaña ‘Personalización’, donde puedes personalizar el diseño, el tamaño y la posición del interruptor.

También puedes cambiar el color del interruptor del modo oscuro, pero necesitarás la versión pro del plugin para eso.

Una vez que hayas terminado, simplemente haz clic en el botón ‘Guardar Cambios’ para almacenar tu configuración. Ahora, visita tu sitio de WordPress para ver el interruptor del modo oscuro en acción.

Si ves la versión móvil de tu sitio web, verás que el modo oscuro también funciona en smartphones y tablets.

Agregar Modo Oscuro al Área de Administración de WordPress

Puedes cambiar el esquema de color del administrador en WordPress usando la configuración integrada. Sin embargo, ninguno de los esquemas de color predeterminados reduce la luz blanca que emana de la pantalla.

Si trabajas hasta tarde en la noche o sufres de fatiga visual, puedes intentar agregar un modo oscuro al área de administración de WordPress y al editor de bloques.

Para hacer eso, visita la página WP Dark Mode » Configuración y cambia a la pestaña 'Modo Oscuro del Panel de Administración' en la columna izquierda.

Aquí, activa el interruptor para la opción 'Habilitar Modo Oscuro del Panel de Administración' a 'ACTIVADO' y haz clic en el botón 'Guardar Cambios'.

Una vez que hagas eso, notarás que el interruptor del modo oscuro estará en la parte superior de tu panel de administración de WordPress.

Desde aquí, puedes activar el interruptor para activar este modo cuando quieras.

Si también quieres agregar un modo oscuro para el editor de bloques, entonces debes activar el interruptor 'Modo Oscuro del Editor de Bloques' a 'ACTIVADO'.

Luego, haz clic en el botón 'Guardar Cambios'.

Ahora abre una página o publicación en el editor de contenido. Notarás un ícono de modo oscuro en la parte superior. Haz clic en él para expandir la pestaña y selecciona la opción 'Modo Oscuro'.

Así es como se verá tu editor de bloques en modo oscuro.

Tutorial en video

Suscríbete a WPBeginner

Esperamos que este artículo te haya ayudado a aprender cómo agregar el modo oscuro a tu sitio web de WordPress. También te puede interesar nuestra guía sobre cómo elegir un esquema de color perfecto para tu sitio de WordPress o ver nuestras selecciones expertas de los mejores constructores de temas de WordPress para personalizar tu sitio.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.