Función @contrast para Blogger

Función utilitaria diseñada para evaluar el brillo percibido de un color en Blogger y determinar de forma automática su nivel de contraste. Siguiendo el modelo matemático de luminosidad HSP propuesto por Darel Rex Finley en su blog sin depender depender de JavaScript.

Esta función forma parte del proyecto Hamlet. Puedes revisar el código fuente en GitHub.

Definición de la función

<b:includable id='@contrast'>
  <b:comment>
  Evaluates a color's brightness and exposes its contrast state.
  @author zkreations
  @param {Color} color - Color variable from data:skin.vars
  @param {Number} [threshold=155] - Brightness limit to trigger the dark state (0-255)
  @param {String} [attr="data-theme"] - Target attribute name to render
  </b:comment>
  <b:with value='+((data:color.red * 0.299), (data:color.green * 0.587), (data:color.blue * 0.114))' var='brightness'>
    <b:with value='(data:threshold + 0) == data:threshold ? (data:threshold * 1) : 155' var='limit'>
      <b:attr expr:name='data:attr ?: "data-theme"' expr:value='data:brightness lt data:limit
        ? "dark"
        : "light"'/>
    </b:with>
  </b:with>
</b:includable>

Especificación de Parámetros

Parámetro	Tipo	Descripción
`color`	`color`	Color de `data:skin.vars`. Obligatorio.
`threshold`	`number`	Umbral de luminosidad. Por defecto `155`.
`attr`	`string`	Nombre del atributo HTML. Por defecto `"data-theme"`.

Modo de uso

Para implementar esta función, añade el fragmento en los marcados predeterminados (<b:defaultmarkups type='Common'>) de tu tema.

color

Es la variable de configuración tipada como color que el motor descompone internamente en sus canales RGB (.red, .green, .blue) para calcular la luminosidad percibida.

<footer>
  <b:include data='{ color: data:skin.vars.footer_bg }' name='@contrast'/>
</footer>

Si el color de fondo elegido por el usuario es oscuro (Ej: #111111):

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

threshold

Establece el límite matemático del umbral de brillo. Un valor más bajo requerirá que el color sea considerablemente más oscuro para alternar el valor a "dark".

<div>
  <b:include data='{ color: data:skin.vars.body_bg, threshold: 120 }' name='@contrast'/>
</div>

Si el brillo calculado es inferior al límite restrictivo de 120:

<div data-theme='dark'></div>

attr

Modifica de forma explícita el nombre de la propiedad o atributo HTML que el motor acoplará dinámicamente sobre la etiqueta contenedora externa.

<body>
  <b:include data='{ color: data:skin.vars.main_color, attr: "data-contrast" }' name='@contrast'/>
</body>

Si la variable evaluada se identifica como un tono de luminosidad alta o clara:

<body data-contrast='light'></body>