title: Bootstrap 4 - Reference a color by root name in css
body: <p>I'm using a nice Bootstrap 4 css theme which overrides default one with very nice colors but I'm not being able to "reference" a color by its root name from css.</p>
  
  <p>Lets explain better, Bootstrap has some root colors which names are "success", "danger", "dark", "light" and so (and so the custom theme css template), and -of course- they have an hex representation and I'd like to apply one of this colors to a link hover calling it by its root name and not by its hex code.</p>
  
  <p>To be more clear, I'd like to be able to do something like the next:</p>
  
  <pre><code>.dropdown-menu &gt; a:hover {
    color: success; /*or dark or danger or whatever */
  }
  </code></pre>
  
  <p>This way, if I change the template in the future, all colors will adjust autommatically to the new template values and all app appearence will stay in "harmony" with the new general template aspect.</p>
  
  <p>I'm not sure this is possible using pure css but maybe there is a workaround.</p>
  
  <p>As you see, my goal is to be able to have as much colors as I can referenced by name (let's say dynamically instead of statically using hex) so if I change the bootstrap css template all colors adjust autommatically to new template values.</p>
  
  <p>Any help / ideas?</p>