Muchos dispositivos ahora vienen con soporte nativo para el modo oscuro. Agregar un modo oscuro a su sitio web adapta automáticamente su diseño a las preferencias del navegador de sus usuarios. Incluso puede agregar un conmutador de modo oscuro a su sitio también.
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 vienen con un modo nocturno que en realidad usa tonos de color más cálidos. El modo oscuro utiliza un enfoque diferente al agregar colores oscuros en el 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 con esa extensión:
Agregar el modo oscuro a su sitio ofrece a los usuarios la opción de activar y desactivar el modo oscuro mientras visualizan su sitio. También le brinda más control sobre el aspecto de su sitio en el modo oscuro.
Los sitios web populares como YouTube también ofrecen una combinación de colores oscuros. Esto permite a los usuarios ver videos a altas horas de la noche 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 las tardes o por la noche.
Primero, veremos cómo agregar el modo oscuro a su sitio web de WordPress. Luego, cubriremos cómo agregar el modo oscuro a su panel de administración de WordPress.
Consejo: ¿Quiere 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 plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.
Tras la activación, vaya a la Configuración »WP Dark Mode en su administrador de WordPress y haga clic en la pestaña Configuración general. Debería ser redirigido allí automáticamente.
Aquí, la configuración ‘Habilitar el modo oscuro consciente del sistema operativo’ se ha activado para usted. 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 el ajuste ‘Mostrar interruptor flotante’. Esto significa que los usuarios pueden 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.
Simplemente visite su sitio web y verá el interruptor en la esquina inferior derecha. Haga clic en él para cambiar instantáneamente su sitio al modo oscuro en su dispositivo:
Hay más opciones de personalización disponibles en el Configuración »WP Dark Mode página. Sin embargo, estos son bastante limitados con el plugin.
Por ejemplo, solo necesita hacer 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 cualquier cambio.
Nota: Con la versión gratuita de WP Dark Mode, solo obtiene los primeros 2 estilos de interruptor flotante 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, además de 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 su pantalla. Afortunadamente, esto plugin también resuelve ese 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.
Simplemente ve al Configuración »WP Dark Mode página y haga clic en la pestaña Configuración general. Luego, cambie el interruptor ‘Habilitar modo oscuro de backend’ 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á un nuevo interruptor en la barra superior de su área de administración:
Simplemente haga clic en este interruptor para cambiar instantáneamente su área de administración al modo oscuro.
Consejo: Si su sitio tiene varios usuarios de WordPress, cada persona puede activar y desactivar el modo oscuro como prefiera.
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 configurar esto, simplemente vaya a Usuarios »Perfil y haga clic en una opción en Admin Color Scheme.
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 ícono de color pequeño 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 querer ver nuestro artículo sobre el mejor WordPress plugins para todos los sitios web, y nuestra comparación de las empresas de alojamiento de WordPress mejor administradas.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.
.
Fuente: wpbeginner