Cómo crear diferentes themes con CSS

A veces nos gustaría disponer de diferentes temas de color para aplicar a nuestra web; por estética, tipo dark mode, por aportar un valor añadido a un producto permitiendo que los usuarios personalicen un espacio concreto, o por accesibilidad, para crear hojas de estilo de alto contraste u otras específicas para ayudar a que el contenido llegue a aquellas personas con problemas visuales concretos como el daltonismo.

Pero hasta hace poco tiempo crear diferentes temas con CSS implica necesariamente añadir muchas líneas de código a nuestra hoja de estilos. Por suerte esto ya no es así.

El enfoque

Con los años hemos mejorado la solución a esta necesidad. Nosotros hemos utilizado variables de PHP para dinamizar hojas de estilos y así poder disponer de varias apariencias con un mismo código. Esta práctica se acabó con la aparición de los preprocesadores de CSS como Sass, y a día de hoy podemos hacerlo únicamente con CSS nativo utilizando custom properties, también conocidas como variables de CSS.

Vamos a ver cómo hacerlo con custom properties por ser más versátil, fácil de entender y más rápido de implementar que las otras alternativas, aunque el soporte no sea total.

Nos vamos a saltar los aspectos básicos, caracterísiticas y funcionamiento de las custom properties porque hay magníficos posts sobre eso ahí fuera ^^

El código

Lo primero es definir un set de variables a partir de nuestra paleta de colores, y al hacerlo es aconsejable que ésta no sea demasiado descriptiva, ya que al cambiar los valores éstos pueden perder su sentido, es decir, que la variable --orange tenga un valor azul en lugar de naranja puede despistar y no es correcto, por eso es habitual encontrar variables con nombres como --primary, de esta manera no te pillas los dedos con la significación de la palabra.

Captura de código de variables CSS

A continuación reasignaríamos cada variable con otro valor bajo diferentes selectores para conseguir que la misma declaración haga referencia a valores distintos.

Captura de código de un selector de CSS

Podemos utilizar variables de CSS para registrar cualquier valor válido, no exclusivsamente colores. Parece obvio pero a veces pasamos por alto las cosas más básicas.

A diferencia de las variables de los preprocesadores de CSS, no importa que la reasignación sea posterior a su aplicación en la cascada, el cambio se produce igualmente y no necesitamos llamar a la variable de nuevo en el selector.

Después idearíamos un método para intercambiar las clases que cambiarán la apariencia de nuestra web, como un <select> o un dropdown. Y en cada nueva elección quitaríamos y pondríamos estas clases al contenedor que englobe el área que al que queremos aplicar el nuevo tema, que normalmente será el <body> del documento.

Captura de código JS

Por último, hay que guardar la preferencia del usuario y en cada carga de página comprobar si algo fue guardado. Para esto vamos a utilizar ‘localStorage’.

Captura de código JS

Demo

Aquí tenéis la demo para ver a pequeña escala el efecto. También podéis ver cómo funciona el ‘dark mode’ que hemos implementado en el menú de navegación.

Conclusión

A día de hoy el coste de realizar esta tarea es realmente bajo y los beneficios pueden ser muy altos, por eso aunque no sea requisito en un proyecto creemos que hacer una ‘preinstalación’ es una buena práctica, entendiendo ‘preinstalación’ a utilizar custom properties y hacerlo con nombres genéricos.

Si te ha parecido interesante

Si tienes alguna duda o quieres discutir sobre esto, si el contenido o nuestros perfiles te parecen interesantes y crees que pdemos hacer algo juntos, no dudes en ponerte en contacto con nosotros a través de twitter o por email