Advertisement
  1. Web Design
  2. CSS

Cambia entre esquemas de color con variables CSS y JavaScript

by
Read Time:7 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial analizaremos cómo implementar diferentes esquemas de color en un sitio web usando variables CSS y una línea de JavaScript puro. Primero implementaremos un simple interruptor de modo claro/oscuro. A continuación ampliaremos eso para implementar tantos temas como queramos; modo claro, modo oscuro, modo neón de los 90, ¡lo que sea!

También usaremos consultas de medios para mostrar el modo claro o el modo oscuro, según las preferencias del usuario, y almacenamiento local para recordar cuál de nuestros esquemas de color ha seleccionado el usuario.

Demostración del interruptor de modo claro/oscuro

Echemos un vistazo a la demostración de un interruptor de modo claro/oscuro. Primero construiremos esto y luego lo ampliaremos.

1. Cómo crear un interruptor de modo oscuro

HTML

Primero inicializaremos dos botones para permitirnos controlar el modo claro y el modo oscuro.

Yo usé estos iconos meteorológicos de Envato Elements del sol y la luna para representar los temas claro y oscuro, pero tú puedes reemplazarlos con el contenido que prefieras. También configuré el atributo title para proporcionar contexto a los lectores de pantallas.

Weather iconsWeather iconsWeather icons

CSS

La mayor parte del trabajo realizado en nuestra implementación del interruptor se lleva a cabo usando CSS. Podemos aplicar estilo a los botones para lograr el efecto de icono redondeado:

Definimos los colores de nuestro tema usando propiedades personalizadas de CSS.

"Las propiedades personalizadas [...] contienen valores específicos para ser reutilizados a lo largo de un documento. Se establecen mediante la notación de propiedad personalizada (p. ej., --main-color: black;) y se accede a ellas usando la función var() (p. ej., color: var(--main-color);)” (MDN)

Por lo general, las propiedades personalizadas se definen dentro de la pseudoclase :root, que nos permite enfocarnos en la etiqueta del elemento <html>. En este ejemplo, definimos las variables para un tema claro y oscuro predeterminado para :root usando nombres de clases.

Ahora asignaremos nuestras propiedades personalizadas a otros elementos; esto es lo que permite que los colores cambien dependiendo de la clase :root. Podemos asignar colores a body de esta manera:

La etiqueta body devuelve el color de la variable seleccionada dependiendo de la clase asignada a :root.

JavaScript

En este punto podemos usar JavaScript para determinar la clase para la etiqueta :root y, como lo prometimos, solamente necesitaremos una línea:

La función setTheme establece la clase del elemento root para que sea el parámetro theme.

Podemos enviar esta función a nuestros botones, así que el HTML actualizado se ve así:

Hacer clic en el botón del modo claro establece el valor de la clase HTML en light, y hacer clic en el botón del modo oscuro establece el valor de la clase HTML en dark.

Esto es lo que ocurre con nuestro elemento HTML dependiendo del botón al que se le haya hecho clic:

html class changes from 'dark' to 'light'html class changes from 'dark' to 'light'html class changes from 'dark' to 'light'

Y el estilo de la etiqueta body se ve así:

toggling colors for the body tagtoggling colors for the body tagtoggling colors for the body tag

Con esto, ¡hemos implementado todo lo que necesitamos para cambiar entre un tema claro y uno oscuro!

2. Gestión del estilo en base al tema de color

Gracias a esta implementación, podemos elegir aplicar estilo a los elementos de manera diferente de acuerdo al nombre de clase que tenga el elemento HTML. En nuestra demostración, solamente mostramos un botón a la vez para poder ocultar el otro botón dependiendo de la clase elegida. Así es como se ve el CSS:

Con esto, mostramos el botón del modo claro y ocultamos el botón del modo oscuro cuando el elemento padre tiene una clase dark.

3. Más propiedades personalizadas

Las propiedades personalizadas de CSS no se limitan solamente a los colores; podemos cambiar todo, desde el tamaño de fuente hasta las imágenes de fondo. Esta es una demostración en la que podemos cambiar el tamaño de fuente y la imagen de fondo usando el interruptor.

Imágenes usadas: "Mujer joven con cabello rizado sonriendo" y "Grupo de amigos de la generación del milenio encendiendo bengalas por la noche".

Solamente necesitamos actualizar el CSS para que se vea así:

4. Múltiples esquemas de color

Ahora que hemos implementado el interruptor de modo claro/oscuro, podemos seguir adelante y expandirlo para crear tantos esquemas de color como queramos.

Para este método, hemos creado un menú desplegable que te permite seleccionar 6 temas diferentes para tu página. Echa un vistazo a la demostración:

HTML

En este ejemplo usamos un elemento select para crear el menú desplegable y enviar los temas al select como opciones. Los valores de las opciones son los que enviaremos al elemento HTML como clases.

CSS

Crearemos nuestras variables :root para los diferentes temas usando nombres de clases.

También podemos aplicar estilo a la etiqueta select para que use las variables en lugar del estilo predeterminado:

Luego, el estilo de nuestro body se ve así:

Nota: también podemos enviar valores de respaldo a variables CSS, por lo que establecer el valor de la propiedad font-family: var(--font-family, "Open Sans", sans-serif permite que el navegador establezca la propiedad font-family en "Open Sans", sans-serif si la variable CSS --font-family no está definida.

JavaScript

Finalmente actualizamos nuestro JavaScript para detectar cuando se haya elegido una opción del elemento select.

Nos enfocamos en el elemento select y enviamos el valor seleccionado en setTheme como la clase root.

Ese es todo el JavaScript que necesitamos, y podemos continuar y tener tantos temas como queramos si incluimos más opciones HTML y estilos :root en el CSS.

5. Configuración del tema de acuerdo a las preferencias del usuario

También podemos decidir si queremos establecer un modo claro o un modo oscuro en base a las preferencias del sistema del usuario. Podemos detectar el esquema de color preferido de un usuario mediante la consulta de medios prefers-color-scheme.

"La función de medios CSS prefers-color-scheme se usa para detectar si el usuario ha solicitado un tema de color claro u oscuro." (MDN)

En la consulta de medios, establecemos los valores de nuestras variables :root predeterminadas con los colores de nuestro modo oscuro si el sistema del usuario está configurado con un tema oscuro.

6. Guarda la elección del usuario en el almacenamiento local

Otra función es guardar el tema seleccionado por un usuario en el almacenamiento local, de manera que la página tome el tema elegido de forma predeterminada cada vez que el usuario haga una visita. Podemos modificar nuestra función setTheme para guardar la opción seleccionada en el almacenamiento local.

Para cargar el tema guardado cuando la página sea cargada, podemos crear una función getTheme que obtenga el elemento theme de localStorage y que llame a la función cada vez que se cargue el script:

Conclusión

Para resumir, podemos crear un selector de temas haciendo lo siguiente:

  1. Establecer colores de tema para :root usando variables CSS.
  2. Usar JavaScript para cambiar la clase root.
  3. Llamar a la función en el elemento HTML correspondiente.

Con esto, hemos creado un selector de temas completamente funcional que guarda las opciones del usuario y tiene en cuenta sus preferencias.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.