Mixing
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
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:
I would expect something like this which correctly matches the #D0BB79 color:
How to make the color dynamic as well? The sample dynamically colorful badges are provided with Coveralls.io, Codecov.io or SonarCloud.io.
json github colors badge shields.io
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
add a comment |
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
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:
I would expect something like this which correctly matches the #D0BB79 color:
How to make the color dynamic as well? The sample dynamically colorful badges are provided with Coveralls.io, Codecov.io or SonarCloud.io.
json github colors badge shields.io
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
add a comment |
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
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:
I would expect something like this which correctly matches the #D0BB79 color:
How to make the color dynamic as well? The sample dynamically colorful badges are provided with Coveralls.io, Codecov.io or SonarCloud.io.
json github colors badge shields.io
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
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
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:
I would expect something like this which correctly matches the #D0BB79 color:
How to make the color dynamic as well? The sample dynamically colorful badges are provided with Coveralls.io, Codecov.io or SonarCloud.io.
json github colors badge shields.io
json github colors badge shields.io
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
edited Nov 19 '18 at 18:03
Nikolas
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
asked Nov 19 '18 at 17:51
NikolasNikolas
12.9k53263
12.9k53263
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380159%2fcustom-github-badges-with-dynamic-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380159%2fcustom-github-badges-with-dynamic-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
