0

I have the following code in my project:

:root,
[data-theme=light] {
  --main-color: red;
  --action-color: var(--main-color);
}

[data-theme=dark] {
  --main-color: blue;
}

.action-box {
  padding: 10px;
  background-color: var(--action-color);
}
<div class="content" data-theme="dark">
  <div class="action-box"></div>
</div>

The .action-box is red, even though I have data-theme="dark" on the parent container. Why isn't the color blue? I'm clearly overriding it in my CSS - --action-color references --main-color and --main-color is set to blue. The box actually turns blue when I apply data-theme="dark" to my <html> element, so how exactly does the scoping work here? For example, in the code below, the box turns blue:

:root,
[data-theme=light] {
  --main-color: red;
  --action-color: var(--main-color);
}

[data-theme=dark] {
  --main-color: blue;
}

.action-box {
  padding: 10px;
  background-color: var(--action-color);
}
<html data-theme="dark">
  <body>
    <div class="content">
      <div class="action-box"></div>
    </div>
  </body>
</html>

So what would be the workaround here for local scoping?

darkhorse
  • 8,192
  • 21
  • 72
  • 148
  • 1
    “It is important to note that custom properties resolve any `var()` functions in their values at computed-value time, which occurs before the value is inherited.” https://www.w3.org/TR/css-variables-1/#cycles – Ry- Mar 28 '23 at 17:24
  • @Ry- So it's a feature and not a bug? – darkhorse Mar 28 '23 at 17:27
  • Correct, it’s not a bug. I don’t know what a nice workaround is for what you want to do, though. – Ry- Mar 28 '23 at 17:28

0 Answers0