Aprende a activar el modo oscuro de tus productos digitales con CSS

Aprende a activar el modo oscuro de tus productos digitales con CSS

¡Hola! ¿Sabías qué los usuarios prefieren interactuar con sitios web donde tengan la posibilidad de activar el modo oscuro? Pues sí, la capacidad de poder cambiar el diseño de vista es muy atractiva para cualquier usuario de sitios web. Así qué si no sabes cómo habilitarlo debes aprender inmediatamente. 

¡No te preocupes! Estás en el blog indicado para aprender esto y mucho más. Te traigo a continuación un manual de instrucciones para que puedas incluir esto en los productos que estés programando o desarrollando actualmente. 

¡Presta mucha atención! ¡No te vayas y lee hasta el final para que conozcas esta guía efectiva! 

No es un secreto para nadie que existen comandos de UX que pueden ser usados para agregar un fondo oscuro a tu sitio web. Sin embargo, en esta guía te queremos enseñar cómo habilitar un conmutador jQuery que sirva como botón en la página para que los usuarios puedan activarlo y desactivarlo cuando deseen.

Es importante destacar que esta guía es multiplataforma, es decir, será compatible con todo tipo de dispositivos. Podrás contar con dos modos: modo luz y modo oscuro.

Pasos:

  1. Establecer la estructura de archivos.

El primer paso consiste en crear una carpeta y añadir tres archivos de texto vacíos con las siguientes extensiones: .html, .css y .js. A continuación, te mostraré la secuencia de comandos agregados.

– modo oscuro-css/

      – imágenes/

            – ejemplo.jpg

      – index.html

      – script.js

      – estilo.css

  1. Añadir marca HTML.

En el HTML debes agregar el botón que activa y desactiva la opción modo oscuro. Te recomiendo que lo coloques en la parte superior de la página. Luego, añade la marca <h1> para el título y una categoría semántica. Para cerrar incluye las dos etiquetas <script> antes de </body>.

  1. Crea el CSS para el modo de luz.

Debes crear el CSS para el modo predeterminado de la página. El CSS que te mostraré hace uso de un cuadro mediante columnas donde debes añadir las clases. switch de la página. 

  1. Añade la función switch con jQuery.

El elemento script.js agrega la funcionalidad. De esta manera, cuando el usuario haga click en el botón, se activará el modo oscuro y la etiqueta dirá ‘’activado’’. De la misma forma, cuando el usuario haga click nuevamente en el botón mientras la página está en modo oscuro, se activará el modo luz y la etiqueta dirá ‘’desactivado’’. Por ejemplo:

$( «.inner-switch» ).on( «clic» , función () {

     if ( $( «cuerpo» ).hasClass( «oscuro» )) {

      $( «cuerpo» ).removeClass( «oscuro» );

      $( «.interruptor-interno» ).text( «OFF» );

    } más {

      $( «cuerpo» ).addClass( «oscuro» );

      $( «.interruptor-interno» ).texto( «ON» );

    }

});

Este script se refiere a las siguientes funciones de jQuery:

  1. on(“click”, function() {…}) es un controlador de acciones que activa la función deseada cuando el usuario hace click en el elemento .inner-switch.
  2. hasClass() se encarga de verificar si la categoría .dark está asignada al elemento .inner-switch
  3. RemoveClass() elimina la clase .dark del HTML cuando el usuario cambia al modo luz.
  4. Addclass() añade la categoría .dark al HTML cuando el usuario cambia al modo oscuro.
  5. Text() define el texto que se muestra en la etiqueta del botón. Es decir, ‘’activado’’ o ‘’desactivado’’.
  1. Añade el CSS para el modo oscuro.

Ahora solo queda pulir algunos detalles, tales como los estilos de la categoría .dark que se añade al HTML mediante el script jQuery cuando el modo oscuro esta habilitado. No te olvides de activar el tema modo oscuro a los elementos secundarios a través del selector de CSS universal .dark*. Por ejemplo:

.oscuro ,

 .oscuro * {

     color de fondo : #222 ;

    color : #e6e6e6 ;

    color del borde : #e6e6e6

Al cumplir estos cinco pasos ya has terminado, el modo oscuro estará habilitado en tu página. Esto agregará un plus estético a tu sitio web y ofrecerás una mejor experiencia de usuario a los visitantes de la página ¡COMPARTE ESTE ARTÍCULO CON PERSONAS COMO TÚ!

¿Necesitas ayuda?