how to add dark mode to your wordpress website easy og Cómo agregar el modo oscuro a su sitio web de WordPress (Fácil)

Cómo agregar el modo oscuro a su sitio web de WordPress (Fácil)

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

Al agregar un modo oscuro a WordPress, su sitio web se adapta automáticamente según las preferencias del navegador del visitante. También puede agregar un interruptor de modo oscuro a su sitio para que los visitantes puedan cambiar fácilmente entre el modo oscuro y el claro.

En este artículo, le mostraremos cómo agregar el modo oscuro a su sitio web de WordPress.

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

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

Muchos dispositivos móviles y computadoras modernos usan el modo oscuro para minimizar la cantidad de luz blanca que sale de la pantalla. Esto puede reducir la fatiga visual, especialmente en condiciones de poca luz.

Algunas personas incluso creen que esto le permite usar computadoras y dispositivos móviles hasta altas horas de la noche sin que la luz blanca y azul arruine su sueño.

Algunos dispositivos tienen un modo nocturno incorporado que simplemente usa tonos de color más cálidos. Sin embargo, el modo oscuro agrega colores oscuros al fondo del dispositivo.

Si tiene un teléfono inteligente iPhone o Android, es posible que pueda cambiar al modo oscuro con un interruptor. Algunos sitios web populares como YouTube incluso ofrecen un esquema de color oscuro incorporado.

El modo oscuro de YouTube

En las computadoras de escritorio, puede visitar sitios web en modo oscuro usando una extensión de Chrome como Night Eye.

Así es como se ve el sitio web de AprenderWP con esa extensión:

Un ejemplo de un sitio web, con el modo oscuro habilitado

Agregar un interruptor de modo oscuro a su sitio web permite a los usuarios elegir su modo preferido sin tener que instalar una extensión especial del navegador.

Muchos complementos también le permiten personalizar la apariencia del modo oscuro en su sitio web, por lo que no tiene que usar la configuración predeterminada del navegador o del dispositivo.

Incluso puede agregar el modo oscuro a su área de administración de WordPress. Esto puede ser útil si trabaja en su ubicación por las tardes o por la noche o si sufre de fatiga visual.

Con eso en mente, veamos cómo puede agregar el modo oscuro a la interfaz pública de su sitio web y al área de administración de su sitio web de WordPress.

Consejo: ¿Desea utilizar un esquema de color oscuro, incluso si el dispositivo del visitante está en modo normal o diurno? Entonces echa un vistazo a nuestra lista de los mejores temas oscuros para WordPress.

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

La forma más fácil de crear un modo oscuro para su sitio web es usar Modo oscuro derecho. Este complemento agrega un interruptor para permitir que los visitantes habiliten el modo oscuro en el front-end de su sitio. Incluso puede agregar un interruptor al área de administración para que pueda habilitar el modo oscuro para el tablero de WordPress.

Primero debe instalar y activar el complemento Droit Dark Mode. Para obtener más información, consulte nuestra guía sobre cómo instalar un complemento de WordPress.

Después de la activación, vaya a Droit Dark Mode » Colores preestablecidos y elija cómo se verá su modo oscuro para los visitantes. La versión gratuita del complemento viene con dos colores preestablecidos, así que seleccione el que desea usar.

Agregar modo oscuro a su sitio web de WordPress

Después de eso, haga clic en «Configuración de pantalla» y seleccione un estilo para su interruptor de modo oscuro.

A continuación, abra el menú desplegable Posición del cuerpo y elija dónde desea que aparezca el control deslizante en su blog o sitio web de WordPress. Por lo general, desea agregarlo en la parte superior de su sitio para que los visitantes puedan cambiar fácilmente entre los diferentes modos.

Cómo cambiar la posición del interruptor de modo oscuro en WordPress

Ahora que la configuración está fuera del camino, es hora de habilitar el modo oscuro seleccionando «Configuración general».

Para comenzar, debe activar ‘Habilitar el modo oscuro de front-end’, que agregará el interruptor al front-end de su sitio web.

Habilite el modo oscuro para su sitio web de WordPress

En este punto, WordPress siempre carga su sitio en modo normal y ligero.

Para hacer que el modo oscuro sea el predeterminado, simplemente haga clic para activar el interruptor «Habilitar el modo oscuro predeterminado».

Cómo hacer que el modo oscuro sea el predeterminado para su sitio web de WordPress

Luego haga clic en ‘Guardar configuración’. Si ahora visita su sitio web, verá el nuevo interruptor de modo oscuro en acción.

Para habilitar o deshabilitar el modo oscuro, todo lo que tiene que hacer es hacer clic en el interruptor.

Un ejemplo de modo oscuro en WordPress

Agregue el modo oscuro a su administrador de WordPress Área

Puede cambiar el esquema de color del administrador en WordPress usando la configuración integrada. Sin embargo, ninguno de los esquemas de color estándar reduce la luz blanca que sale de la pantalla.

Si trabaja hasta altas horas de la noche o sufre de fatiga visual, puede intentar agregar un modo oscuro al área de administración de WordPress.

solo ve a Droit Dark Mode » Configuración general y haga clic para activar el interruptor ‘Habilitar modo oscuro de backend’.

Agregue el modo oscuro al área de administración de WordPress

Después de eso, puede elegir un esquema de color para el modo oscuro de administración. Simplemente abra el nuevo menú desplegable «Seleccionar paleta de colores» y seleccione Color 1 o Color 2.

Luego haga clic en ‘Guardar cambios’.

Droit Dark Mode ahora agrega un interruptor de modo oscuro a la barra de herramientas de administración. Haga clic en el interruptor para ver el modo oscuro de administrador en acción.

Habilite el modo oscuro para el área de administración de WordPress

Si no está satisfecho con el aspecto del modo oscuro, abra el menú desplegable «Seleccionar paleta de colores» y elija un nuevo estilo de la lista.

Luego haga clic en «Guardar configuración» y cambie el interruptor para ver los nuevos colores en acción.

Cambia la apariencia del modo oscuro en tu panel de administración de WordPress

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 nuestra guía sobre cómo crear una página de destino en WordPress, o consultar nuestra selección experta de complementos de WordPress imprescindibles.

Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Gorjeo y Facebook.

La publicación Cómo agregar el modo oscuro a su sitio web de WordPress (Fácil) apareció primero en AprenderWP.

Su Calificación Nos Ayuda a Mejorar