Cómo agregar fácilmente el modo oscuro a su sitio web de WordPress

¿Quieres agregar el modo oscuro a tu sitio de WordPress?

Muchos dispositivos ahora vienen con soporte nativo para modo oscuro. Agregar un modo oscuro a su sitio web adapta automáticamente su diseño a las preferencias del navegador de sus usuarios. También puede agregar un interruptor de modo oscuro a su sitio.

En este artículo, le mostraremos cómo agregar fácilmente el modo oscuro a su sitio web de WordPress tanto en la interfaz como en el área de administración.

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

El modo oscuro se usa en dispositivos móviles y computadoras para reducir la cantidad de luz blanca de la pantalla.

Algunos dispositivos están equipados con un modo nocturno que utiliza tonos de color más cálidos. El modo oscuro adopta un enfoque diferente al agregar colores oscuros al fondo.

Si tiene un dispositivo iPhone o Android, es posible que pueda cambiar al modo oscuro simplemente usando un interruptor.

Alternativamente, en su computadora, puede ver sitios web en modo oscuro usando una extensión de Chrome como Night Eye. Así es como se ve el sitio web de TrucosWP usando esa extensión:

Agregar el modo oscuro a su sitio brinda a los usuarios la posibilidad de activar y desactivar el modo oscuro mientras visualizan su sitio. También le brinda más control sobre la apariencia de su sitio en modo oscuro.

Los sitios web populares como YouTube también ofrecen una combinación de colores oscuros. Esto permite a los usuarios ver videos nocturnos con una experiencia de visualización más cómoda.

Además de agregar el modo oscuro a la interfaz de su sitio web, también puede agregar el modo oscuro a su administrador de WordPress. Esto puede resultar útil si trabaja en su sitio por la tarde o por la noche.

Primero, veremos cómo agregar el modo oscuro a su sitio web de WordPress. A continuación, cubriremos cómo agregar el modo oscuro a su panel de administración de WordPress.

Propina: ¿Quieres un sitio web con una combinación de colores oscuros, incluso con el dispositivo del usuario en modo normal o diurno? Entonces echa un vistazo a nuestra lista de los mejores temas oscuros para WordPress.

Agregar el modo oscuro a su sitio web de WordPress

Primero, debe instalar y activar el Modo oscuro WP conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, vaya a Configuración »WP Dark Mode en su panel de administración de WordPress y haga clic en la pestaña Configuración general. Debería ser redirigido allí automáticamente.

Aquí, se ha activado la configuración «Habilitar el modo oscuro según el sistema operativo». Esto significa que los visitantes verán automáticamente la versión en modo oscuro de su sitio cuando su dispositivo esté configurado en modo oscuro.

También se ha activado la configuración «Mostrar interruptor móvil». Esto significa que los usuarios pueden cambiar la vista de su sitio al modo oscuro en cualquier momento, incluso si no han habilitado una opción de modo oscuro en su dispositivo.

Visite su sitio web y verá el interruptor en la esquina inferior derecha. Haga clic para cambiar instantáneamente al sitio de modo oscuro en su dispositivo:

Hay más opciones de personalización en Configuración »WP Dark Mode página. Sin embargo, estos son algo limitados con el plugin gratuito.

Por ejemplo, simplemente haga clic en la pestaña Configuración de pantalla para cambiar el estilo del interruptor flotante:

También puede personalizar los colores del modo oscuro usando la pestaña Configuración de estilo:

Asegúrese de hacer clic en el botón Guardar configuración después de realizar los cambios.

Nota: Con la versión gratuita de WP Dark Mode, solo obtienes los primeros 2 estilos de interruptores móviles y los primeros 2 ajustes preestablecidos de color para elegir.

La versión pro de WP Dark Mode ofrece muchas más opciones de diseño, así como la capacidad de activar el modo oscuro en momentos específicos y la opción de agregar código CSS personalizado.

Agregar el modo oscuro a su administrador de WordPress

WordPress viene con esquemas de color de administrador, pero ninguno de los esquemas de color predeterminados reduce la luz blanca que proviene de la pantalla. Afortunadamente, este plugin también resuelve este problema.

Echemos un vistazo a cómo agregar fácilmente el modo oscuro a su área de administración de WordPress para una experiencia de usuario más agradable durante las últimas horas.

Solo ve al Configuración »WP Dark Mode página y haga clic en la pestaña Configuración general. Luego, mueva el interruptor «Habilitar backend del modo oscuro» a la posición de encendido. No olvide hacer clic en el botón Guardar configuración en la parte inferior de la página:

Ahora verá una nueva palanca en la barra superior de su área de administración:

Simplemente haga clic en este interruptor para activar inmediatamente el modo oscuro del área de administración.

Propina: Si su sitio tiene varios usuarios de WordPress, cada persona puede activar y desactivar el modo oscuro a su gusto.

Dado que el «Modo oscuro» no es un esquema de color de administrador, puede usarlo fácilmente junto con un esquema de color de administrador de WordPress existente. Para configurarlo, vaya a Usuarios »Perfil y haga clic en una opción en el esquema de colores del administrador.

Tenga en cuenta que deberá 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. Haga clic en el pequeño icono de color en la parte superior izquierda, luego seleccione el modo que desea usar:

Ahora puede escribir y trabajar cómodamente en su sitio web por la noche sin forzar la vista.

Esperamos que este artículo le haya ayudado a aprender cómo agregar el modo oscuro a su sitio web de WordPress. También puede consultar nuestro artículo sobre los mejores plugins de WordPress para todos los sitios web y nuestra comparación de las empresas de alojamiento de WordPress mejor administradas.

¿Te ha resultado útil??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicado. Required fields are marked *