title: Get Bootstrap's current theme colors in Javascript
body: <p>My objective is to create charts using <code>chart.js</code> using colors that match the current chosen Bootstrap 4 theme (there are multiple available for the site)</p>
  
  <p>My current strategy is to have a badge of every color on the page:</p>
  
  <pre><code>  &lt;div id="color-example-badge-primary" class="badge badge-primary" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-warning" class="badge badge-warning" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-danger" class="badge badge-danger" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-secondary" class="badge badge-secondary" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-light" class="badge badge-light" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-success" class="badge badge-success" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-info" class="badge badge-info" &gt;&lt;/div &gt;
    &lt;div id="color-example-badge-dark" class="badge badge-dark" &gt;&lt;/div &gt;
  </code></pre>
  
  <p>and then use jQuery to pull the background colors into an array:</p>
  
  <pre><code>var themeColors = [$("#color-example-badge-primary").css('backgroundColor'),
                     $("#color-example-badge-warning").css('backgroundColor'),
                     $("#color-example-badge-danger").css('backgroundColor'),
                     $("#color-example-badge-secondary").css('backgroundColor'),
                     $("#color-example-badge-light").css('backgroundColor'),
                     $("#color-example-badge-success").css('backgroundColor'),
                     $("#color-example-badge-info").css('backgroundColor'),
                     $("#color-example-badge-dark").css('backgroundColor')
  ];
  </code></pre>
  
  <p>I can then give this array to <code>chart.js</code> to create a chart with the theme colors.</p>
  
  <p>Is there a better way to get the current theme colors from the CSS using Javascript? Or is there no way without creating a DOM element and testing it's background color?</p>
  
  <p>If there is an easy way to get CSS rules using Javascript without dealing with a DOM element, that'd be great.</p>