Cómo activar el modo oscuro en su sitio de WordPress

Franklin Tutoriales de WordPress Oct 22, 2020

Hacer que sus usuarios se sientan cómodos es el principal objetivo de cualquier sitio web para retenerlos. Sucede que en determinadas condiciones, preferimos tener un brillo adaptado, como el modo oscuro en los smartphones cuando está oscuro. Pero, ¿cómo se activa el modo oscuro en un sitio de WordPress para mejorar la experiencia del usuario? Esto es lo que veremos a través de este artículo.

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

La mayoría de los dispositivos móviles, Android o iPhone, ahora están equipados con un modo nocturno. Este último tiene tonos de color más cálidos y adecuado para determinados ambientes. Es un poco diferente del modo oscuro, que le agrega colores oscuros en el fondo. El objetivo aquí es reducir la cantidad de luz blanca de la pantalla.

Usando una extensión de Google Chrome llamada Night Eye, es posible ver sitios web en modo oscuro. Lo probamos en nuestro sitio CodeWatchers y así es como se ve:

Cuando su sitio tiene el modo oscuro, les da a sus usuarios la opción de apagarlo o encenderlo como mejor les parezca mientras navegan. Esto es muy práctico, especialmente cuando está oscuro para una experiencia de navegación más cómoda.

Varios sitios populares ofrecen este modo. Este es el caso, por ejemplo, de YouTube en caso de visualización nocturna.

Además, es posible agregar el modo oscuro no solo a la interfaz de su sitio web, sino también a su administrador de WordPress. Veremos en detalle cómo hacerlo más adelante. Pero comencemos primero simplemente activando el Modo oscuro en su sitio web.

Habilitar el modo oscuro en su sitio web de WordPress

Para comenzar, debe instalar y activar Complemento WP Dark Mode en su sitio de WordPress. Luego vaya a la página Configuración »WP Modo oscuro en su administrador de WordPress y haga clic en la pestaña Configuración general. Serás redirigido automáticamente.

En este punto, verá que el parámetro "Habilitar el modo oscuro consciente del sistema operativo" está habilitado. Básicamente, cuando uno de los dispositivos de sus visitantes está configurado en Modo oscuro, se les mostrará la versión en Modo oscuro de su sitio web. Interesante, ¿no?

Además, también tiene la configuración "Mostrar interruptor flotante" que permite a sus usuarios cambiar su vista del sitio al modo oscuro en cualquier momento, incluso si no han habilitado una opción de Modo oscuro en su dispositivo. Esta configuración también aparecerá habilitada.

Ahora regrese a su sitio web. En la esquina inferior derecha, hay un interruptor en el que solo tiene que hacer clic para cambiar instantáneamente su sitio al modo oscuro en su dispositivo.

En la pestaña Configuración de estilo, tienes una variedad de opciones que te permitirán personalizar el modo Oscuro de tu sitio a tu gusto.

NOTA: Cabe señalar que la versión gratuita del complemento WP Dark Mode tiene funciones limitadas a los primeros 2 estilos de conmutador flotante y los primeros 2 ajustes preestablecidos de color.

Con la versión Pro, tienes muchas más opciones de diseño. Además, es posible activar el modo oscuro en momentos específicos o agregar código CSS personalizado.

Habilitar el modo oscuro para su administrador de WordPress

De forma predeterminada, WordPress no tiene esquemas de color de administrador para reducir la luz blanca que proviene de su pantalla. Es por eso que vamos a usar el complemento WP Dark Mode nuevamente. Afortunadamente, el procedimiento es muy sencillo.

Simplemente vaya a la página Configuración »WP Dark Mode y haga clic en la pestaña Configuración general. Allí verá el parámetro "Enable Backend Darkmode". Cambias a ON y listo. Por supuesto, no olvide hacer clic en el botón Guardar configuración en la parte inferior de la página:

Ahora verá un nuevo interruptor en la barra superior de su área de administración:

Para cambiar su área de administración al modo oscuro, simplemente haga clic en este interruptor.

NOTA: Incluso si tiene varios usuarios en su sitio de WordPress, cada uno de ellos puede elegir si habilitar o no el modo oscuro como desee.

Además, es posible utilizar el modo oscuro con un esquema de color de administrador de WordPress existente. Para hacer esto, vaya a Usuarios »Perfil y haga clic en una opción debajo de la opción Admin Color Scheme. Por supuesto, es necesario desactivar el modo oscuro para ver las opciones de combinación de colores del administrador.

Al escribir una publicación en el editor de bloques de WordPress, también puede activar el modo oscuro. Para hacer esto, haga clic en el pequeño ícono de color en la parte superior izquierda, luego seleccione el modo que desea usar.

¡Eso es todo! Esperamos que este artículo le ayude a agregar fácilmente el modo oscuro a su sitio de WordPress. Así no tendrá que forzar la vista cuando trabaje hasta altas horas de la noche.

Si te gustó este artículo, compártelo en tus redes sociales favoritas. También le recomendamos que nos siga en los teléfonos Gorjeo y Facebook para estar siempre al día rápidamente con futuras publicaciones.