¿Cómo habilitar el modo oscuro en el sitio de WordPress? – Aprendermarketing.es/

El modo oscuro ayuda a ofrecer una mejor experiencia de lectura y evita mirar la pantalla más brillante en un ambiente oscuro. Los sistemas operativos como Windows y macOS tienen un modo oscuro incorporado, y los navegadores también tienen una opción para alternar un tema oscuro. Sin embargo, estas cosas no ayudarán a ver el contenido del sitio web en modo oscuro real. Normalmente, el sitio se mostrará sobre un fondo blanco, independientemente de la configuración de su sistema o navegador. Si realmente desea utilizar el modo oscuro para su sitio de WordPress, estas son las opciones para usted.

Tema y consideraciones del modo oscuro

Si planea comenzar un nuevo sitio de WordPress o está considerando cambiar el tema, entonces la mejor opción es buscar un tema que admita el modo oscuro.Por alguna razón, si su tema actual no admite la función, entonces tiene muchos complementos para Además, los temas no proporcionan características adicionales como el modo oscuro para el área de administración, cambiar el diseño del interruptor, cambiar el color preestablecido, etc. Por lo tanto, usar un complemento es la forma de usar el modo oscuro en WordPress.

Recuerde que ya sea que esté utilizando un complemento o tema de modo oscuro, se agregará una gran cantidad de CSS y JavaScript al código fuente. Debe usar complementos de almacenamiento en caché como WP Rocket o Autoptimize para agrupar los estilos en línea/JS y retrasar/retrasar los archivos para que la puntuación de velocidad de su página no se vea afectada.

Complementos de modo oscuro para WordPress

Aquí le explicaremos tres complementos diferentes y puede elegir el que se adapte a sus necesidades.

• DarkLooks - Cambiador de modo oscuro – para cambiar el modo de interfaz con personalizaciones completas.
• Modo oscuro para el panel de WP – para un panel de administración de WordPress sin configuraciones.
• WP Dark Mode: el mejor modo oscuro y complemento para compartir en redes sociales para WordPress – para un editor de frontend, backend y bloque con una característica profesional frustrantemente cara.

1. Habilite el modo oscuro en la interfaz de WordPress con el complemento DarkLooks

A continuación se muestra cómo se ve nuestro sitio de prueba en el navegador Chrome con la pantalla predeterminada. Apliquemos el modo oscuro a este sitio y veamos cómo se ve.

Inicie sesión en su panel de WordPress y vaya a la sección "Complementos> Agregar nuevo". Busque "modo oscuro" para encontrar el complemento DarkLooks, luego instálelo y actívelo.

Ve a la sección "DarkLooks > Configuración" donde podrás encontrar todas las opciones de personalización.

• Ajustes básicos – aquí puede habilitar el modo oscuro, el botón de alternar y usar la opción del sistema operativo en lugar de la opción de complemento.

• Configuración avanzada – agregue un botón de alternancia al menú de navegación superior, active o desactive elementos y configure el tamaño de fuente principal.
• Configuración del interruptor – Actualmente hay 5 estilos de alternar disponibles y puede elegir uno de los cuatro ángulos de visualización.

• Colores preestablecidos – Seleccione las opciones Método de configuración de color y Ajuste preestablecido de color para seleccionar uno de los ajustes preestablecidos disponibles. También puede establecer colores personalizados para la vista en modo oscuro. Los ajustes preestablecidos de negro y gris claro funcionan en la mayoría de los casos.

• Ajuste de imagen – cargue el logotipo para los modos claro y oscuro y configure la opacidad para las imágenes en modo oscuro.
• basado en el tiempo – programe el modo oscuro en función de la hora de inicio y finalización establecida.
• CSS personalizado – agregue su propio CSS personalizado para corregir cualquier elemento que no se vea bien en el modo oscuro. El editor admite el resaltado de sintaxis y muestra errores/advertencias, lo que ayuda a validar su CSS.

Todas estas opciones son gratuitas sin ofertas frustrantes en una versión pro (aunque puede encontrar complementos recomendados por el autor por separado en DarkLooks> Recomendado suplementos"). Después de habilitar el modo oscuro, nuestro sitio de prueba se ve como a continuación sin CSS personalizado. puede ver que el interruptor de palanca para el modo oscuro se ha agregado tanto al menú como a la esquina inferior derecha. Puede utilizar una de estas opciones de botón óptimas para la configuración de su sitio.

2. Habilite el modo oscuro para el panel de WordPress

La única característica que falta en el complemento DarkLooks es que no admite el modo oscuro para el panel de administración de WordPress. Si desea esta función para su backend, instale y habilite el complemento "Modo oscuro para WP Dashboard". Una vez que habilite el complemento, se aplicará instantáneamente el modo oscuro con un color preestablecido como se muestra a continuación.

No hay configuraciones de personalización disponibles para este complemento. Puede alternar entre el modo oscuro y el modo predeterminado usando el botón "Alternar modo oscuro" en la barra de administración superior. Si desea deshabilitar el modo oscuro para el nivel de usuario, vaya a "Usuarios> Perfil", marque la opción "Deshabilitar el modo oscuro" y guarde los cambios.

3. Modo oscuro para Gutenberg Editor, Frontend y Backend con WP Dark Mode

El complemento WP Dark Mode es una buena opción que ayuda a cambiar la interfaz, el área de administración y el editor de Gutenberg. Además de estas características, todas las demás configuraciones son premium, lo que fácilmente lo molestará. Por ejemplo, no puede agregar CSS personalizado, incluir o excluir elementos. Si no le preocupa que un complemento llene el área de administración con poco valor, entonces puede elegir un complemento de modo oscuro de WP. Después de instalar y activar, vaya a la sección "WP Dark Mode > Settings" y aquí están las opciones gratuitas disponibles para usted.

• Ajustes básicos – aquí puede habilitar los modos oscuros para la interfaz, el servidor, el editor de bloques y la opción basada en el sistema operativo. Cuando la opción del servidor está habilitada, la barra de administración superior mostrará un botón de alternar para cambiar los modos.

• Ajustes avanzados – aquí puede hacer que el modo oscuro sea la opción predeterminada para los lectores.
• Ajustes de color – seleccione un color predeterminado predeterminado, como el modo Oro o Zafiro.

• Cambiar la configuración – muestra el botón de alternar flotante, elige entre 3 estilos libres, cambia el tamaño, agrega dos efectos de animación.
• Configuración de imagen – agregue brillo bajo y efecto de escala de grises a las imágenes.
• animación – agregar efectos de animación cuando el usuario cambia de modo.

Si ha habilitado el modo oscuro para el Editor de bloques en Configuración general, vaya al editor y verá un icono de alternar en la barra superior. Haga clic en eso y seleccione la opción Modo oscuro. También puede insertar un bloque Alternar modo oscuro en cualquier lugar en el área de contenido y seleccione el estilo de alternancia.

A continuación se muestra cómo se ve el sitio de prueba en los colores preestablecidos Gold y Sapphire usando el complemento WP Dark Mode.

palabras de cierre

Como puede ver, no ve soporte de temas para usar el modo oscuro en los sitios de WordPress. Instale uno de los complementos que desee y agregue un botón de alternar para que los usuarios cambien de modo. Recomendamos el complemento DarkLooks WP, que tiene un conjunto de herramientas limpio y gratuito. Después de habilitar el modo oscuro, asegúrese de probar su sitio a fondo para asegurarse de que el logotipo, la prueba y las imágenes se muestren correctamente. Si es necesario, también puede usar el modo oscuro para el panel de administración y cambiar cuando sea necesario.