Aquí le mostramos cómo agregar el modo oscuro a su sitio web de WordPress con facilidad

 

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

Muchos dispositivos ahora son compatibles con el modo oscuro nativo. Cuando agrega un modo oscuro a su sitio web, su diseño se adaptará automáticamente a la configuración 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 las áreas frontend como en las de administración.

Agregar el modo oscuro a su sitio web de WordPress (fácil)

¿Qué es el modo oscuro y por qué debería agregarse 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 tienen un modo nocturno que usa tonos más cálidos. El modo oscuro adopta 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 con solo un interruptor.

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

El sitio web de WordPress que se muestra con la extensión de Chrome 'Night Eye'

Agregar el modo oscuro a su sitio permite a los usuarios activar y desactivar el modo oscuro mientras visualizan su sitio. Además, tiene más control sobre el aspecto 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 a altas horas de la noche con una experiencia de visualización más cómoda.

Ver YouTube con temas oscuros habilitados

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. Luego, cubriremos cómo agregar un modo oscuro a su panel de administración de WordPress.

Propina: ¿Quiere un sitio web con una combinación de colores oscuros incluso cuando el dispositivo del usuario está en modo normal o en modo 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 necesitas instalar y activar eso Modo oscuro WP Enchufar. Para obtener más información, consulte nuestra guía paso a paso sobre la instalación de un complemento de WordPress.

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

La configuración ‘Activar modo oscuro compatible con SO’ se ha activado para usted aquí. Esto significa que los visitantes verán automáticamente la versión en modo oscuro de su sitio web cuando su dispositivo pase al 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.

La página de configuración general para el complemento WP Dark Mode

Simplemente visite su sitio web y verá el interruptor en la esquina inferior derecha. Haga clic en él para poner instantáneamente su sitio en modo oscuro en su dispositivo:

El interruptor de modo oscuro ahora aparecerá en el sitio web para los visitantes.

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

Por ejemplo, todo lo que necesita hacer es hacer clic en la pestaña Configuración de pantalla para cambiar el estilo del interruptor flotante:

Seleccione el tipo de botón de alternancia del modo nocturno en la configuración de pantalla

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

Elija su esquema de color para el modo oscuro en la configuración de estilo

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

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, así como la capacidad de activar el modo oscuro en ciertos momentos y agregar código CSS personalizado.

Agregar un modo oscuro a su administrador de WordPress

WordPress viene con esquemas de color de administrador, pero ninguno de los esquemas de color estándar reduce la luz blanca que sale de su pantalla. Afortunadamente, este complemento también resuelve ese problema.

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

Solo ve al Configuración »WP Dark Mode Haga clic en la pestaña Configuración general. Luego, cambie el interruptor «Activar Backend Darkmode» a «Activado». No olvide hacer clic en el botón Guardar configuración en la parte inferior de la página:

Active el interruptor Active el modo oscuro de backend para que pueda usar el modo oscuro en su administrador de WordPress

Ahora se mostrará un nuevo botón en la barra superior de su área de administración:

El interruptor de palanca en su administrador de WordPress para cambiar entre claro (normal) y oscuro para su interfaz de administración

Simplemente haga clic en este botón para cambiar instantáneamente su administrador al modo oscuro.

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

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 Perfil del usuario y en Admin Color Scheme, haga clic en una opción.

Tenga en cuenta que debe desactivar el modo oscuro para ver las opciones de combinación de colores del administrador:

Elegir un esquema de color de administrador en WordPress en su página de perfil de usuario

Cuando escribe una publicación en el editor de bloques de WordPress, también puede habilitar el modo oscuro. Haga clic en el icono de color pequeño en la parte superior izquierda y seleccione el modo que desee:

Activar el modo oscuro en el editor de bloques de WordPress

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 todos los sitios web y nuestra comparación de las empresas de alojamiento de WordPress mejor administradas.