Can Referenced CSS vars be overwritten in a selector? [duplicate] - css

Question

This question already has answers here:
CSS scoped custom property ignored when used to calculate variable in outer scope
(2 answers)
Closed 2 years ago.
I am trying to overwrite color value here that's not applying in Chrome at least. Wondering if this is a bug or just a limitation of CSS vars.
The --contrast-color I am overwriting isn't taking effect (#fff). However, obviously, normally overwriting --title-color works fine if I define it again in .dark as --title-color: var(--contrast-color);
:root {
--contrast-color: red;
--title-color: var(--contrast-color);
}
.dark {
--contrast-color: #fff;
background: #000;
}
.title {
color: var(--title-color);
}
<div>
<h1 class="title">
Heading (should be red)
</h1>
</div>
<div class="dark">
<h1 class="title">
Heading (should be #fff)
</h1>
</div>

Answer 1

the variable --title-color: var(--contrast-color); is defined for the :root element while you update --contrast-color on .dark element.
If you want to have that reference automatically updated, without the need of redeclaring --title-color, both the variables --contrast-color should be declared for the same element (e.g. on the div as in the example below, but I recommend to apply the theme class to a common container, like :root)
An update on a variable would eventually re-evaluate a reference on its descendants, not on the ancestors: in fact, if the update of the variable also affected the ancestors overriding the same property, then it would change instantly, on cascade, the other title too.
So as a result both the titles would be white coloured.
div {
--contrast-color: red;
--title-color: var(--contrast-color);
}
div.dark {
--contrast-color: #fff;
background: #000;
}
.title {
color: var(--title-color);
}
<div>
<h1 class="title">
Heading (should be red)
</h1>
</div>
<div class="dark">
<h1 class="title">
Heading (should be #fff)
</h1>
</div>