Cómo agregar modo oscuro a un sitio web de WordPress

En esta publicación, discutiremos cómo agregar el modo oscuro a WordPress. Recientemente, muchos sitios web importantes han agregado formas oscuras a sus interfaces de usuario, como YouTube, Reddit, Stack Overflow, Facebook y más. El crecimiento masivo que tuvo lugar en octubre de 2019 coincidió con la adición del camino oscuro en Instagram y con varias otras aplicaciones importantes. Este aberrante excluido, puedes ver que el modo oscuro ha crecido en popularidad en los últimos dos años. Como muchas empresas importantes pasan por el camino oscuro, usted también debe pensar en esto. No solo es en tendencias, sino que es beneficioso para sus usuarios y podría aumentar las tasas de retención. Reduce la fatiga de los ojos, aumenta la vida útil de la batería de los dispositivos que los visitantes usan para navegar por el sitio y se ve simplemente increíble.
Si está pensando en agregar el modo oscuro a su sitio de WordPress, hay algunos complementos que hacen que esta tarea sea bastante simple. En esta publicación de blog, presentaremos el complemento que usamos para darle a WordPress una forma oscura y revisar los pasos necesarios para agregar esta funcionalidad a su sitio web. El complemento para el modo nocturno (oscuro). El complemento que usaremos para agregar el modo oscuro a nuestro sitio de WordPress se llama modo nocturno. Es un complemento gratuito que se puede encontrar fácilmente en WordPress Warehouse e instalarse rápidamente en su sitio web.

Sorprendentemente, el complemento tiene solo 2000 instalaciones, pero funciona bien y hace lo que dice. Es por eso que tiene una calificación de 4.5 estrellas de cinco. Como agencia, utilizamos este complemento en muchos de los sitios web de nuestros clientes que contienen blogs bien observados como una forma de agregar fácilmente la forma oscura. Después de instalar el complemento, ¿va a buscar? personalizar. Una vez que se cargue la interfaz de personalización para WordPress, haga clic en la pestaña “Modo nocturno”. Ahora es el momento de comenzar a configurar la forma oscura para WordPress. Elegir y configurar colores de manera oscura El primer paso para agregar el modo oscuro en Word Press, después de instalar el complemento, es la elección del esquema de color. Puede hacer esto de dos maneras:
Use Coolors.co. Puede usar esta herramienta para generar sus propios esquemas de color o puede explorar las creaciones de otros usuarios.
Directamente hacia atrás. Puede tomar el esquema de color estándar que usa su sitio y simplemente revertir cada color de él. Esto puede funcionar, pero generalmente los colores son demasiado duros para verse bien.
Copiar a otros. Esta sería realmente nuestra sugerencia. Vaya a una plataforma importante que tenga una forma oscura y copie los colores generales que usan.
Para ayudarlo a crear el esquema de color, hemos creado tres colecciones de colores individuales que puede usar en su propio sitio web. Estos colores fueron copiados de Facebook, Reddit y Firefox.
Modo de Firefox oscuro

Aplicación de Facebook para modo oscuro

Modo oscuro reddit

Ahora que tiene su selección de color en modo oscuro, es hora de implementarlos en su sitio utilizando el complemento de modo nocturno. En la pestaña del modo nocturno en la interfaz de personalización de WordPress, comience a ejecutar las opciones. Elija el estilo de conmutador, configure el tamaño del interruptor y luego cambie los colores del cuerpo, el texto, el enlace y pase con el mouse. Estos se aplicarán globalmente a su sitio cuando un usuario activa el conmutador del modo nocturno, estos colores reemplazarán el esquema de color existente.
También puede elegir tener el modo nocturno como predeterminado, lo cual es una opción agradable si le gusta el nuevo esquema de color más que el existente. Puede elegir entre 5 interruptores individuales para el modo nocturno y colocar el interruptor en cualquier lugar de su sitio a través de un código corto.

(Use el atributo de estilo para designar el estilo de conmutador que desea usar en esa ubicación específica).
Personalizar el modo oscuro aún no es razonable para esperar que el complemento agregue una versión completamente funcional del modo oscuro en su sitio de WordPress sin ninguna personalización adicional. Especialmente con los creadores de la página de WordPress y los temas personalizados, las pocas opciones que ofrecen este complemento en la interfaz de personalización no aplicarán completamente el estilo oscuro a todo su sitio web.
Para usar realmente este complemento en todo su potencial, deberá continuar y agregar algunos CSS personalizados. No se preocupe, incluso si no está familiarizado con CSS, esta es una tarea muy fácil. Te presentaré, paso a paso, cómo agregar un estilo en el modo nocturno para cada elemento en un sitio web. El complemento le indica exactamente cómo aplicar el estilo en el modo Noche/Oscuro a los elementos de WordPress: si desea cambiar el color de otros elementos, puede usar el campo CSS adicional. Ejemplo de CSS: Body.wp-Night-Model .Element-Class {Color: #000; } Para cambiar el color de los elementos individuales, todo lo que tiene que hacer es cambiar en modo oscuro y ver dónde no se aplica. Luego, haga clic con el botón derecho en el elemento del cual no se ha aplicado el modo nocturno, inspeccionarlo y obtener la ID de CSS o el nombre de la clase.
En este ejemplo, usaremos una ID CSS para aplicar el estilo DarkMode a un WordPress individual. La identificación es “#div_block-48-27”. Ahora que conocemos el identificador, ejecutaremos CSS personalizados y agregaremos el estilo para el elemento cuando se cambie el modo nocturno. Para especificar que este CSS solo debe aplicarse cuando se activa el modo oscuro, aplique este prefijo:
Body.wp-Night-model-on Esto significa que el estilo CSS no se aplicará a menos que se active el modo oscuro. Después del prefijo, agregue el identificador del elemento. En este ejemplo, nuestro identificador es #div_block-48-27. No tiene que ser una identificación de CSS, podría ser una clase. Body.wp-Night-Mode-on #Div_Block-48-27 {
} Ahora que tenemos nuestro identificador CSS, podemos agregar el estilo que se aplicará cuando se active el modo oscuro. La mayoría de las veces, el único estilo que necesita cambiar es el color de fondo y el color del texto. Body.wp-Night-Mode-on #div_block-48-27 {fondo: #000;



Color: #fff;
} Este código cambiará el color de fondo del elemento para que sea negro, y el texto del elemento es blanco.
Cruce todo el sitio web, página por página e identifique los elementos que el estilo global de Nightmode no se aplica a usted. Luego, utilizando la técnica de identificación de CSS que acabo de mencionar, cree el estilo en el modo nocturno para su sitio. Tenga en cuenta que este método funcionará para todos los sitios de WordPress, sin importar qué tema si usa un generador de páginas o cualquier otra cosa. Simplemente encuentre el identificador del elemento que desea cambiar y luego especifique el cambio que se realizará al elemento cuando el modo oscuro se cambie a través de CSS. Las imágenes y los gráficos ocupan el último obstáculo que tendrá que superar cuando se trata de agregar la forma oscura en su sitio de WordPress es cuidar las imágenes. En algunos casos, sus imágenes pueden permanecer como están. Por ejemplo, si activa el modo oscuro con Instagram, las imágenes no se invierten. En cambio, permanecieron igual, pero la interfaz a su alrededor cambia su color.
Para su sitio de WordPress, especialmente si es un blog, recomendamos mantener las imágenes tal como son. Por lo general, el color promedio estará en algún lugar entre los extremos de blanco y negro, lo que significa que la imagen será perfectamente visible independientemente del color de la interfaz. Al mismo tiempo, los gráficos que son negros o negros (o en algún lugar cercano a uno de estos extremos) pueden causarle un problema. Por ejemplo, si tiene una imagen negra y el usuario activa el modo oscuro, lo más probable es que el gráfico se mezcle en el fondo. Esto podría ser muy malo, especialmente si su sitio de WordPress tiene tales motores para el logotipo u otros íconos importantes. No solo daña la experiencia del usuario al no proporcionar la información necesaria, sino que parece poco profesional y desafortunada. Tenga en cuenta que este problema probablemente se aplicará solo si el logotipo o los gráficos están muy cerca de ser blanco o negro. Si son multicolores, pueden funcionar bien con cualquier tipo de color de fondo. Sin embargo, si no cae en esta categoría, puede haber un problema. Afortunadamente, hay muchas maneras de solucionar este problema. En la mayoría de los casos, puede usar filtros CSS para cambiar fácilmente el color de su logotipo para que coincida con el color de la interfaz con el usuario que está presente en el sitio. Hagamos algunos ejemplos. Este es nuestro logotipo principal, que es bastante oscuro. Si entramos en el camino oscuro, el texto de este logotipo se perderá en el sitio.
Creo que la mejor manera de hacer que este logotipo sea visible cuando nuestro sitio está en la forma oscura es simplemente hacerlo blanco. Podemos hacer esto de algunas maneras. Podemos empacar esta imagen en un DIV, y cuando se cambie el modo oscuro, retire la imagen y reemplácela con una versión PNG blanca utilizando la imagen de fondo en CSS. Sin embargo, esto es complicado y, en muchos casos, no es posible, porque debe acceder a los archivos reales que componen la sede de la cabeza y editan PHP (podría ser aterrador, difícil y confundido). En cambio, haremos algo más que sea más fácil y más rápido. También se puede aplicar a cualquier tema, porque usa solo CSS (no requiere adiciones HTML). Usaremos filtros CSS para cambiar este logotipo blanco completo. Esto es bastante simple de hacer, aunque toma 2 pasos. En primer lugar, cambiaremos el brillo al final, lo que hace que el logotipo sea completamente negro. Filtro: brillo (0); luego revertiremos la imagen, que cambia en blanco y negro. Filtro: reverso (1);
Entonces su CSS completo se ve así: Body.wp-Night-Mode-on img#myphoto {
Filtro: brillo (0) inversión (1);