One of the features in TWBS 4 is the presence of color variables within the :root selector in bootstrap.css.
Is it possible for my child stylesheet to also include a :root selector, allowing me to define my own variables?
I assume that :root {} can be overridden and expanded upon like any other selector, although I haven't come across any discussions or examples regarding this.
Currently, I have placed my color variables within a div {} selector where they function properly. However, I aim to apply them to elements beyond just <div>, indicating the necessity for my custom :root section.
The following example illustrates my current setup:
my_stylesheet.css
div {
--myColor1: rgba(16, 128, 0, 1.0);
--myColor2: rgba(16, 128, 0, 0.6);
}
Nonetheless, I desire to structure it as follows:
:root {
--myColor1: rgba(16, 128, 0, 1.0);
--myColor2: rgba(16, 128, 0, 0.6);
}