En este tutorial descubrirás cómo añadir el modo oscuro o dark mode, en tu sitio web WordPress.
El modo oscuro de muchas ventajas para nuestros usuarios, desde el ahorro de la batería hasta un mejor descanso visual al momento de leer los artículos en nuestro sitio web.
Hoy en día muchos dispositivos ya vienen con la opción de activar el dark mode en toda la interfaz del usuario, entonces añadir el modo oscuro a nuestro le permitirá a nuestros lectores tener una mejor experiencia.
En el siguiente video te mostramos cómo añadir el dark mode a tu web:
Table De Contenidos
¿Qué es el Dark Mode?
El Dark Mode es un modo opcional de diseño en el que la mayoría de colores en la interfaz de usuario cambian hacia tonos oscuros. Este tipo de diseño reduce la cantidad de luz que emite la pantalla, pero al mismo tiempo conserva un contraste entre los colores suficientemente alto como para no molestar la lectura o la utilización del sitio web o aplicación que el usuario se encuentra viendo.
En muchos dispositivos el Dark Mode se puede activar por defecto para todas las interfaces que lo soporten en ese dispositivo, entonces si una aplicación tiene la opción de Dark Mode, se activará de forma automática debido a que la hemos activado por defecto en nuestro dispositivo.
Esto también incluye a los sitios web, y gracias a este tutorial aprenderás cómo añadir el Dark Mode a tu sitio web.
Añadiendo el Dark Mode en WordPress
Para lograr añadir el Dark Mode en nuestro sitio web WordPress, lo primero que necesitaremos es instalar el plugin llamado: WP Dark Mode
Gracias a este plugin, podremos añadir el Dark Mode a nuestro sitio web WordPress, además este plugin también nos permite activarlo en el área de administración de WordPress.
Entonces debes buscar el plugin desde Plugins > Añadir Nuevo, luego lo instalamos y activamos.
Una vez que activamos el plugin, nos enviara hacia los ajustes de WP Dark Mode.
Pero desde este momento el Dark Mode ya se encuentra activo en nuestro sitio web, para poder visualizar como se ve nuestro sitio web con el nuevo Dark Mode.
Debemos ir hacia el área pública de nuestro sitio web, desde ahí vas a encontrar que en la esquina de abajo a la derecha, contamos con un nuevo ícono.
Nuestros visitantes pueden dar clic en ese ícono para activar o desactivar el modo oscuro.
Como puedes comprobar en tu propio sitio web, este plugin activo de forma automática el modo oscuro en el área pública de tu web WordPress.
Ajustes adicionales del modo oscuro con WP Dark Mode
Si los resultados que has obtenido al simplemente activar este plugin son suficientes para ti, entonces puedes dejar el plugin activado y la función de modo oscuro podrá seguir siendo disfrutada por tus visitantes.
Pero me gustaría mostrarte que este plugin te ofrece muchas más opciones que te permiten personalizar y añadir funciones adicionales al modo oscuro en tu sitio web.
Para poder encontrar estas funciones adicionales debemos regresar a nuestra área de administración, si por alguna razón has salido de los ajustes de WP Dark Mode, entonces puedes regresar a sus opciones si vamos hacia Ajustes > WP Dark Mode
Ajustes Generales
La primera pestaña en las opciones del plugin son los ajustes generales.
Algunas de estas opciones ya vienen activadas por defecto cuando el plugin es instalado.
- La primera opción nos permite activar o desactivar la función del plugin desde el área pública de nuestro sitio web, si esta opción se encontrará desactivada entonces nuestros usuarios no podrán utilizar el plugin.
- La 2ª opción que tenemos disponible nos permite activar el modo oscuro en nuestro escritorio, si la activamos entonces el bloque nos añadirá un switch dentro de nuestra barra de herramientas con el que podremos pasar hacia modo oscuro.
- Abajo de esta opción nos permite decidir si deseamos mostrar el icono con el que nuestros usuarios activarán el modo oscuro desde la vista pública, normalmente será buena idea tener esta opción activada, ya que de lo contrario nuestros usuarios no sabrán que esta función se encuentra activa en nuestro sitio web.
- La última opción nos permite activar el modo oscuro de forma automática, si el usuario tiene activo el modo oscuro en su dispositivo. Es decir que si yo tengo activo el modo oscuro en mi celular y visito este sitio web, entonces lo podre ver en modo oscuro desde el inicio, y no necesitaré activarlo manualmente.
Modificar el diseño del modo oscuro
Desde las opciones adicionales de este plugin también es posible modificar el esquema de colores que utiliza o cambiar los íconos con el que nuestros usuarios pueden activar el modo oscuro.
Si vamos hacia los ajustes de visualización, podrás ver que la opción que dice «Estilo del conmutador flotante», es posible modificar el icono que se muestra en la vista pública de nuestro sitio web.
El plugin nos ofrece 7 diferentes opciones, sin embargo debido a que estamos utilizando la versión gratuita del plugin únicamente podemos seleccionar 2 de ellas.
Luego podríamos modificar la posición en la que aparece el icono en nuestro sitio web, normalmente aparecerá abajo a la derecha pero podríamos mostrarlo también abajo a la izquierda.
Si después nos dirigimos hacia los ajustes de estilo, el plugin nos permitirá modificar el esquema de colores que utiliza en el modo oscuro.
Por defecto el esquema de colores que es utilizado es el naranja, blanco y negro, pero el plugin tiene en total 11 diferentes esquemas de colores pre-diseñados.
Aunque nuevamente debido que estamos utilizando la versión gratuita únicamente podemos seleccionar entre 2 de ellos, el otro esquema de colores que tenemos disponible es el azul, blanco y negro.
Con la versión de pago de esta plugin, incluso podríamos crear un esquema de colores personalizado.
Modo oscuro en el escritorio
Como te mencionaba antes, este plugin te permite añadir el modo oscuro al escritorio de administración, si aún no lo tienes activado entonces puedes hacerlo entrando los ajustes generales del plugin, y luego dando clic en la opción que indica «Activar el modo oscuro en el escritorio»
Una vez que activamos el modo oscuro para nuestro escritorio de administración, podremos encontrar un nuevo switch en nuestra barra de herramientas, si le damos clic nuestra área de administración pasará a modo oscuro.
Si tienes más usuarios en tu sitio web con acceso al área de administración de WordPress, entonces ello también podrán utilizar el modo oscuro, cada uno puede activar o desactivar el modo oscuro y esa opción se guarda de forma individual para cada usuario.
WP Dark Mode no es un esquema de colores de WordPress, entonces es posible utilizarlo desde el área de administración, junto a los esquemas de colores por defecto de WordPress.
El plugin también nos permite modificar el esquema de colores del modo oscuro cuando nos encontramos dentro del editor de contenidos, de esta forma podremos modificar los colores del modo oscuro cuando nos encontramos creando o editando contenidos.
Toma en cuenta que WP Dark Mode te permite modificar el esquema de colores para el modo oscuro, únicamente en el editor de contenidos, si deseas utilizar un esquema de colores diferentes en otras áreas de tu web, entonces será necesario utilizar la versión de pago del plugin.
Espero que este tutorial te ayude a decidir si deseas añadir la función de Dark Mode en tu sitio web, y si ya lo decidiste, entonces como puedes ver, el plugin WP Dark Mode es una muy buena opción a tomar en cuenta.
Si tienes usuarios adicionales que pueden acceder al escritorio de WordPress, ellos también se podrán beneficiar del plugin desde el área de administración; posiblemente te interese ver el tutorial en el que te mostramos como moderar el registro de usuarios en tu sitio web WordPress.
Si tienes preguntas, por favor no dudes en colocarlas dentro de los comentarios.