jsongithubcolorsbadgeshields.io

Custom GitHub badges with dynamic color

I struggle with creating a shields.io badge which changes color dynamically.

I am able to use the JSON response to parse a text into a badge and set the color to orange:

https://img.shields.io/badge/dynamic/json.svg?label=custom&url=https://jsonplaceholder.typicode.com/posts&query=$[1].id&colorB=orange

enter image description here

Works well...

However, I want to change the color according to a rule. I might return the HEX color in JSON as well to be parsed into the badge. I tried the public API to get a random color and test the behavior:

http://www.colr.org/json/color/random

I get the first randomly get color with JsonPath $.colors[0].hex and place it o the badge URL as both as the dynamic value and color:

https://img.shields.io/badge/dynamic/json.svg?label=custom&url=http://www.colr.org/json/color/random&query=$.colors[0].hex&colorB=$.colors[0].hex

Regardless of the randomly chosen color, the result is always somehow green (the last generated result was #D0BB79:

enter image description here

I would expect something like this which correctly matches the #D0BB79 color:

enter image description here

How to make the color dynamic as well? The sample dynamically colorful badges are provided with Coveralls.io, Codecov.io or SonarCloud.io.

Solution

  • If you are able to dynamically generate JSON and host it somewhere public (e.g. using GitHub Actions updating files in a dedicated branch), then you can use shields.io endpoint badges.

    As example, with https://pastebin.pl/view/raw/98e63f07 containing:

    { "schemaVersion": 1, "label": "custom", "message": "d0bb79", "color": "d0bb79" }

    https://img.shields.io/endpoint?url=https%3A%2F%2Fpastebin.pl%2Fview%2Fraw%2F98e63f07

    Will look as requested:

    enter image description here