Cómo agregar el modo oscuro a su sitio web de WordPress con estos 4 simples pasos

Cuando Instagram y un par de otros sitios web y aplicaciones importantes agregaron el modo oscuro en octubre de 2019, presenciamos un gran aumento en el interés de las personas por esta función.

Sin embargo, incluso si excluimos el valor atípico que es la adopción de Instagram del modo oscuro, también conocido como modo nocturno , el gráfico anterior indica claramente el crecimiento en la popularidad de la función en los últimos años.

Junto con Instagram, muchas otras empresas importantes han hecho la transición a la era del modo nocturno, y usted también debería considerar hacer el cambio. No solo porque está de moda, sino por sus muchos beneficios para sus usuarios, que incluyen, entre otros, la reducción de la fatiga visual para sus usuarios, una mayor duración de la batería para los dispositivos utilizados para visitar su sitio y el hecho de que se ve mucho mejor.

Bien, el último puede ser un poco subjetivo, pero nos quedaremos con él.

Afortunadamente, agregar un modo oscuro a su sitio web de WordPress es bastante simple. No solo puede configurar cómo se muestra su sitio web a cada usuario, sino que también puede agregar la función a su panel de administración y darle un descanso a sus propios ojos.

Si está pensando en agregar un modo oscuro a su sitio, hay algunas formas de hacerlo, pero usar un complemento es, con mucho, la más simple, como puede imaginar.

En esta publicación, presentaremos un complemento que la mayoría de las empresas de diseño de sitios web en Los Ángeles recomiendan, WP Dark Mode, y revisaremos todos los pasos que debe seguir para agregar y personalizar esta funcionalidad para que se ajuste a su sitio web y tema de WordPress.

Pero primero, echemos un vistazo a qué es el modo oscuro y sus beneficios más notables. ¡Sigue leyendo!

¿Qué es el modo oscuro y por qué es útil?

También conocido como modo nocturno, el modo oscuro es un simple cambio de pantalla que cambia el esquema de color de un sitio web de claro a oscuro.

En un sitio web típico con letras negras sobre un fondo blanco, esto generalmente parece que los colores simplemente se han invertido, pero, como explicaremos a continuación, hay algo más que eso.

Este simple ajuste reduce significativamente la luz blanca que sale de la pantalla, lo que reduce la fatiga visual, especialmente si un usuario visita el sitio web por la noche.

La opción para habilitar el modo oscuro está disponible en la mayoría de los sistemas operativos y navegadores web modernos.

Los beneficios más notables del modo oscuro

Ya hemos mencionado algunos de los beneficios de esta función a lo largo de esta publicación, pero pensamos en resumirlos todos aquí en una buena lista con viñetas para su conveniencia.

Entonces, los beneficios del modo oscuro incluyen lo siguiente:

• Menos tensión en los ojos
• Reducción del consumo de energía y mayor duración de la batería
• Menos luz blanca de las pantallas
• Más tiempo dedicado a su página

Como ya sabe, los navegadores y sistemas operativos modernos ya ofrecen el modo oscuro como una opción, pero si desea que su sitio web se muestre en el esquema de color correcto para los usuarios que lo prefieren, deberá agregarlo usted mismo.

Afortunadamente, la instalación del complemento WP Dark Mode puede simplificar este proceso, además de brindarle todo tipo de control sobre la apariencia del modo oscuro de su sitio web.

Modo oscuro frente a modo nocturno

Antes de continuar, nos gustaría abordar un problema potencial con el que los lectores con ojo de águila pueden tener un problema. Es decir, hemos estado usando y continuaremos usando los términos "modo oscuro" y "modo nocturno" indistintamente a lo largo de este artículo, aunque técnicamente pueden describir dos características diferentes.

El término "modo nocturno" se usa a menudo para una función disponible en la mayoría de los teléfonos inteligentes modernos, que elimina total o parcialmente la luz azul de la pantalla cuando cae la noche para reducir el impacto del tiempo frente a la pantalla en su ciclo de sueño.

Sin embargo, como explicamos anteriormente, los dos términos se pueden usar indistintamente, que es el enfoque que elegimos tomar en esta publicación.

Ahora que lo hemos solucionado, veamos cómo puede agregar el modo oscuro (o nocturno) a sus sitios web de WordPress.

Cómo agregar el modo oscuro a su sitio web de WordPress usando el complemento WP Dark Mode

Ahora que conoce todas las razones por las que puede querer agregar el modo oscuro a su sitio de WordPress, le mostraremos cómo hacerlo a través de cuatro simples pasos.

Nuestros amigos de una empresa de diseño web en Miami nos ayudaron a crear esta guía paso a paso que se basa en un complemento especializado llamado WP Dark Mode.

1. Instalar el complemento

Aunque hay varios complementos de WordPress en modo oscuro, encontramos que WP Dark Mode es el más fácil de usar y confiable.

Es un complemento que le permite crear una versión oscura de su sitio de forma rápida y sin esfuerzo, sin necesidad de lidiar con configuraciones o códigos complicados.

Como es de esperar, el directorio de complementos de WordPress es donde podrá encontrar esta herramienta.

Suponemos que ha agregado complementos a su sitio anteriormente, pero por si acaso, todo lo que necesita hacer es ir a su panel de administración y seleccionar Agregar nuevo en la pestaña Complementos .

Desde allí, puede encontrar el modo oscuro de WP y hacer clic en Instalar ahora y activar .

2. Active la configuración deseada

Puede activar y desactivar el modo oscuro en la pestaña Configuración general . Una vez que abra esta pestaña, verá que dos opciones ya están activadas de forma predeterminada.

Estos son Habilitar el modo oscuro de frontend y Habilitar el modo oscuro consciente del sistema operativo .

El primero habilita el modo oscuro en su sitio web, mientras que el segundo significa que la función se activará automáticamente si el sistema operativo o el navegador del usuario están configurados en Modo oscuro.

Otra opción es establecer el modo oscuro como predeterminado . Este se explica por sí mismo: si lo enciende, todos los usuarios verán la versión oscura de su sitio web, independientemente de sus preferencias.

3. Encienda y personalice el interruptor flotante

Si desea dar a los usuarios la opción de cambiar entre los modos oscuro y claro en cualquier momento, también puede habilitar la opción Mostrar interruptor flotante .

Esta opción hará exactamente lo que dice en la lata: coloque un interruptor en la parte frontal de su sitio, lo que permitirá a los usuarios activar o desactivar el modo oscuro según lo deseen.

Puede jugar con la ubicación y el estilo del icono en la sección Configuración de pantalla. Sus opciones en términos de estilo son algo limitadas en la versión gratuita del complemento, pero la funcionalidad clave (activar o desactivar el modo oscuro) está ahí.

4. Experimente con diferentes esquemas de color en modo oscuro

En este punto, su sitio web de WordPress tiene un modo oscuro en pleno funcionamiento, y si eso es todo lo que estaba buscando, puede omitir este paso.

Sin embargo, si no desea que su sitio se vea genérico, le recomendamos que personalice los colores del modo oscuro. Encontrarás todas las opciones que necesitas en la sección Configuración de estilo .

Esta pantalla ofrece una paleta de colores que podría funcionar con la identidad visual de su sitio.

Como puede imaginar, la versión gratuita del complemento WP Dark Mode ofrece opciones algo limitadas aquí, pero debería poder encontrar una solución adecuada.

Si desea personalizar aún más los colores, la versión premium ofrece una gama más amplia de paletas de colores preestablecidas y le permite crear su propio esquema.

​Bonificación: habilitar el modo oscuro en el panel de administración de WordPress

Si va a ofrecer a sus clientes y prospectos todos los beneficios de un modo oscuro en la parte frontal de su sitio web de WordPress, ¿por qué no extender la misma cortesía a usted mismo y agregar el modo a su panel de administración también?

Si el esquema de color predeterminado de WordPress es demasiado brillante para su gusto, el complemento WP Dark Mode tiene la solución. Aquí está cómo hacerlo:

1. Instale el complemento WP Dark Mode ; no hay mucho que explicar aquí. Consulte la sección anterior para obtener instrucciones sobre cómo completar este paso.
2. Habilitar el modo oscuro de backend: esta opción se encuentra en la misma pestaña que las otras configuraciones esenciales de las que hablamos antes ( Configuración general ). Tendrá que navegar a esta sección y activar un interruptor titulado Habilitar modo oscuro de backend. No olvide desplazarse hacia abajo y hacer clic en Guardar configuración para aplicar el cambio.
3. Alterne el modo oscuro en su panel de administración : su panel de administración ahora tendrá un interruptor en la parte superior, lo que le permitirá activar el modo oscuro. Esto es particularmente útil para sitios web con múltiples administradores, ya que cada persona puede activar o desactivar el modo oscuro de forma independiente.
4. (Opcional) Ajuste el esquema de color de su Panel de administración : con el modo oscuro activado, es posible que desee cambiar algunos colores para que todo se vea más bonito. Para hacer esto, vaya a Usuarios > Perfil y seleccione la paleta que prefiera. Una vez que haya configurado los colores, haga clic en Actualizar perfil para aplicar la nueva configuración.

Y eso es todo lo que hay que hacer. Esperamos que esta guía lo haya ayudado a implementar el modo oscuro en su sitio de WordPress, así como en su Panel de administración.

Esta actualización es casi demasiado sencilla de ignorar con el complemento WP Dark Mode, por lo que lo alentamos a que agregue esta excelente funcionalidad a su sitio.

Biografía del autor: Christopher es especialista en marketing digital en Digital Strategy One y bloguero independiente. Está enfocado en las nuevas tendencias de tecnología web y distribución de voz digital a través de diferentes canales. En su tiempo libre, Christopher toca la batería y Magic: the Gathering.