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. Las investigaciones demuestran que el modo oscuro puede reducir la fatiga visual para los lectores nocturnos y potencialmente ahorrar batería en dispositivos móviles.

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 nuestra forma probada de agregar el modo oscuro en WordPress. Hemos probado esta solución en varios temas y configuraciones para asegurarnos de 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.

Usar el modo oscuro te permite usar computadoras y dispositivos móviles hasta tarde en la noche. Ayuda a evitar que la luz blanca y azul arruine tu sueño.

El modo oscuro también es útil para personas con discapacidades visuales. Mejora la accesibilidad para usuarios con sensibilidad a la luz (fotofobia).

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 su modo preferido sin 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.

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 ‘Save Changes’ para guardar tu configuración.

A continuación, cambia a la pestaña 'Personalización' para 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.

También puedes visitar tu sitio web en tu móvil o tableta. Esto te permite ver que el modo oscuro también funciona en dispositivos móviles.

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 el 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

Preguntas frecuentes sobre el modo oscuro en WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia antes de habilitar el modo oscuro en WordPress:

¿WordPress tiene modo nocturno?

No, WordPress no tiene una función de modo nocturno incorporada para el front-end de tu sitio web. Para agregar esta funcionalidad, necesitas usar un plugin como WP Dark Mode o instalar un tema oscuro específico.

¿Cómo cambiar el tema a modo oscuro?

La forma más fácil de cambiar tu tema actual a modo oscuro es instalando un plugin que agregue un interruptor. Alternativamente, puedes navegar a Apariencia » Temas y activar un tema que esté diseñado con un esquema de color oscuro.

¿Cuáles son las desventajas del modo oscuro?

La principal desventaja es que el modo oscuro puede ser difícil de leer en ambientes brillantes y soleados. Adicionalmente, los logotipos estándar o las imágenes transparentes con elementos oscuros pueden desaparecer o verse distorsionados sobre un fondo oscuro.

¿Qué modo de color es mejor para los ojos?

El modo oscuro suele ser mejor para los ojos en condiciones de poca luz porque reduce el deslumbramiento y el parpadeo de la pantalla. Sin embargo, el modo claro a menudo es mejor para la legibilidad y la comprensión del texto durante el día o en habitaciones bien iluminadas.

¿Qué porcentaje de personas usa el modo oscuro?

Datos recientes sugieren que más del 80% de los usuarios de dispositivos móviles prefieren usar el modo oscuro en sus dispositivos. Soportar este modo en tu sitio web asegura que estás satisfaciendo la gran mayoría de las preferencias de los usuarios.

¿Es el tema oscuro más saludable para los ojos?

Sí, un tema oscuro puede ser más saludable para tus ojos, ya que minimiza la exposición a la luz azul intensa. Esta reducción de la luz azul puede ayudar a prevenir la fatiga visual digital y puede mejorar la calidad del sueño si usas dispositivos por la noche.

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.