¿Quieres agregar el modo oscuro a tu sitio de WordPress? Muchos dispositivos ahora son compatibles con el modo oscuro nativo. 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 selector 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?
Contents
El modo oscuro se usa en dispositivos móviles y computadoras para reducir la cantidad de luz blanca en la pantalla. Algunos dispositivos vienen con un modo nocturno que usa 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 con solo usar un interruptor. También puede ver sitios web en modo oscuro en su computadora usando una extensión de Chrome como Night Eye. Así es como se ve el sitio web de MundoCMS usando esta 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 el aspecto de su sitio en modo oscuro. Los sitios web populares como YouTube también tienen 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, incluso 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, echemos un vistazo a 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.
Consejo: ¿Quiere un sitio web con una combinación de colores oscuros, incluso con el dispositivo del usuario en modo normal o diurno? A continuación, consulte nuestra lista de los mejores temas oscuros para WordPress.
Agregar el modo oscuro a su sitio web de WordPress
En primer lugar, debe instalar y activar el complemento WP Dark Mode. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Durante la activación, vaya al 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í, se ha habilitado la configuración «Habilitar el modo oscuro compatible con 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 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 complemento gratuito. 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.
Notar: Con la versión gratuita de WP Dark Mode, solo obtiene los primeros 2 estilos de interruptores flotantes y los primeros 2 ajustes preestablecidos de color para elegir. La versión profesional de WP Dark Mode ofrece muchas más opciones de diseño, así como la capacidad de habilitar el modo oscuro en momentos específicos y la capacidad 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, este complemento también soluciona este problema. Veamos 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 a Configuración »WP Dark Mode y haga clic en la pestaña Configuración general. A continuación, 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 ese 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 desee. Dado que el « modo oscuro » no es un esquema de color de administrador, puede usarlo fácilmente con un esquema de color de administrador de WordPress existente. Para configurar esto, vaya a Perfil del usuario 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:
Cuando escribe una publicación en el editor de bloques de WordPress, también puede habilitar 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 consultar nuestro artículo sobre los mejores complementos de WordPress para cualquier sitio 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 para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.
Originally posted 2021-02-24 20:29:37.