2 ms·
The <p> tag is red because it is inside of #alert. Anything inside of #alert has the color variable set to red. Variables don't use specificity like CSS select
by zdragnar 11mo ago
The <p> tag is red because it is inside of #alert. Anything inside of #alert has the color variable set to red.
Variables don't use specificity like CSS selectors. I prefer to create a few layers for variables; one for color names, one that maps color name variables to global semantic names (i.e. --primary-cta-color: var(--blue-50) or something), and maybe go so far as to add another that maps component-specific semantics to global specific semantics (i.e. --date-picker-hover-color: var(--primary-cta-color)).
That way, you can add something like
.theme-1 {
--primary-cta-color: var(--blue-50);
}
.theme-2 {
--primary-cta-color: var(--brown-40);
}
and / or
@media (prefers-color-scheme: dark) {
.theme-1 {
--primary-color: var(--grey-30);
}
.theme-2 {
--primary-color: var(--brown-10);
}
}
as a purely hypothetical example. Slap the class name your user wants on the body tag, and you're good to go.