Crear temas de color con propiedades personalizadas, HSL y un poco de calc()

Antes de la llegada de las propiedades personalizadas de CSS (podríamos llamarlas “variables” en este artículo porque ese es su espíritu), implementar múltiples esquemas de color en el mismo sitio web generalmente significaba escribir hojas de estilo separadas. Definitivamente no es lo más fácil de mantener del mundo. Sin embargo, hoy en día podemos definir variables en una única hoja de estilo y dejar que CSS haga la magia.

Incluso si no ofrece algo como temas de color generados o elegidos por el usuario, aún puede utilizar el concepto de tematización en su sitio web. Por ejemplo, es bastante común utilizar temas de diferentes colores en diferentes áreas del sitio.

Vamos a construir un ejemplo como este:

En este ejemplo, todo lo que cambia entre secciones es el tono del color; las variaciones de luminosidad son siempre las mismas. A continuación se muestra un ejemplo de una paleta de colores simplificada para un tono específico:

Una paleta de múltiples tonos podría verse así:

Esto requeriría un esfuerzo para hacer con el valor de color RGB, pero en HSL solo cambia un valor.

Introducir propiedades personalizadas

Las propiedades personalizadas existen desde hace algún tiempo y cuentan con un amplio respaldo. También están disponibles Polyfills y otras soluciones para IE 11.

La sintaxis es muy similar a la del CSS tradicional. Aquí hay una descripción general del uso básico:

Es común ver variables definidas sobre el :rootpseudoelemento, que siempre está htmlen HTML, pero con mayor especificidad. Dicho esto, las variables se pueden definir en cualquier elemento, lo que resulta útil para determinar el alcance de variables específicas para elementos específicos. Por ejemplo, aquí hay variables definidas en atributos de datos:

Agregar calc() a la mezcla

Las variables no tienen por qué ser valores fijos. Podemos aprovechar el poder de la calc()función para calcular valores automáticamente mientras nos adherimos a un patrón uniforme:

Dado que CSS no admite bucles, un preprocesador sería útil para generar una parte del código. Pero recuerda: las variables CSS no son lo mismo que las variables Sass.

Implementando variables CSS

Básicamente, lo que intentamos hacer es cambiar el color del mismo componente en diferentes secciones de la misma página. Como esto:

Tenemos tres secciones en pestañas con sus propios ID: #food, #lifestyley #travel. Cada sección corresponde a un tono diferente. El elemento data-theme-attributeen el div.wrapperelemento define qué tono está actualmente en uso.

Cuando #traveles la pestaña activa, estamos usando la --first-huevariable, que tiene un valor de 180°. Eso es lo que se utiliza como --huevalor en la sección, lo que da como resultado un color verde azulado:

div data-theme="travel"

.wrapper[data-theme="travel"] {  --hue: var(--first-hue);  /* = 180° = teal */}

Al hacer clic en cualquiera de las pestañas, se actualiza el atributo del tema de datos al ID de la sección, al tiempo que se elimina el hash ( #). Esto requiere una pizca de JavaScript. Esa es una de las (muchas) cosas buenas de CSS: se puede acceder a ellos y manipularlos con JavaScript. Esto está muy lejos de las variables del preprocesador, que se compilan en valores en la etapa de construcción y ya no son accesibles en el DOM.

lia href="#food"Food/a/li

const wrapper = document.querySelector('.wrapper');document.querySelector("nav").addEventListener('click', e = {  // Get theme name from URL and ditch the hash  wrapper.dataset.theme = e.target.getAttribute('href').substr(1);})

Mejora progresiva

Cuando usamos JavaScript, debemos tener en cuenta los escenarios en los que un usuario puede haberlo desactivado. De lo contrario, nuestros scripts (y nuestra interfaz de usuario, por extensión) serán inaccesibles. Este fragmento garantiza que el contenido del sitio siga siendo accesible, incluso en esas situaciones:

// progressive enhancement:// without JavaScript all sections are displayed, the theme is only set when the page loadswrapper.dataset.theme = wrapper.querySelector('section').id;

Esto simplemente permite que las pestañas se desplacen hacia arriba en la página hasta la sección correspondiente. Claro, la temática desapareció, pero proporcionar contenido es mucho más importante.

Si bien elegí un enfoque de una sola página, también es posible mostrar las secciones como páginas separadas y configurarlas [data-theme]en el lado del servidor.

Otro enfoque

Hasta ahora hemos supuesto que los valores de color cambian linealmente y, por tanto, están sujetos a un enfoque matemático. Pero incluso en situaciones en las que esto es sólo parcialmente cierto, es posible que aún podamos beneficiarnos del mismo concepto. Por ejemplo, si la luminosidad sigue un patrón pero el tono no, podríamos dividir la hoja de estilo de esta manera:

head  style    :root {      --hue: 260;    }  /style  link rel="stylesheet" href="stylesheet-with-calculations-based-on-any-hue.css"/head

Componentes web compatibles

Los componentes web son un concepto apasionante (y en evolución). Es tentador pensar que podemos tener componentes encapsulados que se pueden reutilizar en cualquier lugar y asignarles un tema caso por caso. ¡Un componente con muchos contextos!

Podemos utilizar temas variables CSS con componentes web. Requiere que utilicemos un host-context()pseudoselector. (¡Gracias a habemuscode por señalarme esto!)

:host-context(body[data-theme="color-1"]) {  --shade-1: var(--outsideHSL);}

En resumen…

Crear un tema para un sitio web con propiedades personalizadas de CSS es mucho más fácil que las soluciones alternativas a las que hemos recurrido en el pasado. Es más fácil de mantener (una hoja de estilo), más eficiente (menos código) y abre nuevas posibilidades (usando JavaScript). Sin mencionar que las propiedades personalizadas de CSS se vuelven aún más poderosas cuando se usan con colores HSL y la calc()función.

Acabamos de ver un ejemplo en el que podemos cambiar el tema de color de un componente según la sección donde se utiliza. Pero nuevamente, aquí hay muchas más oportunidades cuando comenzamos a abordar cosas como permitir que los usuarios cambien los temas ellos mismos, un tema que Chris explora en este artículo.