Calcular la oscuridad de un color en Blogger

Este es el primero de los muchos artículos que quiero compartir con los desarrolladores interesados en Blogger, y aunque mis conocimientos no son tantos como me gustaría, espero aportar información valiosa que pueda ser de utilidad y al mismo tiempo, aprender de ustedes.

En esta ocasión te quiero compartir el método que escribí para detectar la oscuridad de un color en Blogger, algo que me resulto útil para diseños en donde proporciono el modo oscuro.

Situación

Imagina que tu diseño tiene dos secciones, una clara y otra oscura, y ademas los elementos en la sección oscura contrastan con el fondo ya que hay un atributo [data-theme] que se encarga de esto.

El problema de que el color de fondo sea personalizable, es que el usuario puede escoger un color demasiado claro en la sección del tema que debería ser oscura, y por lo tanto, los elementos no se ven bien.

Podríamos usar JavaScript para esto, pero aquí estamos para tratar de hacer todo lo que podamos sin recurrir a ello, por lo tanto la solución la escribiremos con código de Blogger.

Función en Blogger

Dicho lo anterior, vamos a escribir una inclusion global, que es lo mas cercano que tenemos a crear funciones en Blogger. Presta atención al siguiente código:

    <b:includable id='@checkDarken'>
  <b:comment><!--
  // @param {color} color - Variable de color de data:skin.vars
  // @param {string} [attr=data-theme] - Nombre del atributo
  // @param {string} [value=dark] - Valor del atributo
  // @param {string} [callback] - El nombre de otra inclusion
  --></b:comment>
  <b:with
    value='+((data:color.red * .299),(data:color.green * .587),(data:color.blue * .114))'
    var="brightness">
    <b:if cond='data:brightness lt 155'>
      <b:if cond='data:callback'>
        <b:include expr:name='data:callback'/>
      </b:if>
      <b:attr expr:name='data:attr ?: "data-theme"' expr:value='data:value ?: "dark"'/>
    </b:if>
  </b:with>
</b:includable>
  

Explicación

La función espera una variable de color de Blogger obligatoria, ya que éstas almacenan el código de color RGB, que podemos recuperar para este propósito. Luego multiplicamos cada valor por separado, siguiendo el modelo de color HSP, propuesto por Darel Rex Finley en su blog.

Para resumir, lo que intentamos encontrar con este método es el umbral del brillo percibido, de esta manera si en nuestra formula la luminosidad es inferior a “155” (valor ajustable), entonces el fondo es oscuro.

Modo de uso

Agrega la inclusion en un marcado predeterminado de Blogger, específicamente en uno tipo “Common”, así estará disponible en todo el blog. Para entender como funciona vamos a suponer que tienes una variable como esta:

    <Variable name="test" description="test" type="color" default="#fff" value="#fff"/>
  

Por lo cual, la etiqueta de datos será data:skin.vars.test, ahora podemos incluir nuestra función para determinar la oscuridad del fondo en Blogger de la variable especificada:

Atributo

Al agregar el parámetro color en la inclusion, evaluaremos si el color ingresado es demasiado oscuro, en caso de obtener una respuesta afirmativa, el padre recibirá un atributo configurable:

      <footer>
  <b:include name="@checkDarken" data='{ color: data:skin.vars.test }'/>
</footer>
    

<footer data-theme='dark'>...</footer>

Callback

En el parámetro callback debes especificar el nombre de otra inclusion que desees insertar en caso de que el color de fondo sea oscuro. Para este ejemplo creamos la siguiente inclusion:

    <b:includable id='foo'>
  <p>Callback: El fondo si es muy oscuro</p>
</b:includable>
  

Ahora vamos a inserta nuestra función para determinar si el fondo es oscuro, de modo que, en caso de una respuesta afirmativa, insertaremos una inclusion distinta:

      <footer>
  <b:include name="@checkDarken" data='{ color: data:skin.vars.test, callback: "foo" }'/>
</footer>
    

<footer data-theme='dark'>
  <p>Callback: El fondo si es muy oscuro</p>
</footer>

Conclusion

Gracias a la gran cantidad de datos que Blogger almacena y su sintaxis, nos resulta posible crear funciones como esta. En cuanto a su utilidad dependerá del desarrollador. Como sé que puede resultar difícil de entender, en los elementos adjuntos de este artículo encontrarás una plantilla de Blogger para experimentos.

¿Difícil de entender? No te preocupes, en este tipo de artículos siempre encontrarás una plantilla de desarrollo adjunta que contiene un ejemplo claro de todo lo visto. Si te resultó de utilidad no olvides compartir, eso me ayuda mucho. ¡Gracias por pasar!