Bootstrap 4 - Reference a color by root name in css [duplicate]

Question

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.

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.

To be more clear, I'd like to be able to do something like the next:

.dropdown-menu > a:hover {
  color: success; /*or dark or danger or whatever */
}

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.

I'm not sure this is possible using pure css but maybe there is a workaround.

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.

Any help / ideas?

Answer 1

They are CSS Variables. You can reference them like...

.dropdown-menu > a:hover {
  color: var(--success);
}

https://codeply.com/go/vFE9n0VrGz

Related: CSS use color from another class?