Using Bootstrap Colors in JS

Question

I am using a Google-Chart and want to set the slice colors to the color used by bootstrap, e.g., for badge-success or badge-danger. Is there any way to access these color-codes from within JavaScript?

Answer 1

This works if you're using Bootstrap 4:

const root = document.querySelector('html');
getComputedStyle(root).getPropertyValue('--danger');

You can access the CSS variables present in the :root pseudoelement

Answer 2

Another approach is...

document.body.innerHTML += '<div id="myBadge" class="badge-danger"></div>';
var elem = document.getElementById("myBadge");
var dangerColor = window.getComputedStyle(elem).getPropertyValue("background-color");
elem.parentNode.removeChild(elem);

Demo: https://www.codeply.com/go/GC96hjbf5v