<div style="--bg-color: black" class="wrapper">
  <p>White text</p>
</div>

<div style="--bg-color: white">
  <p>Black text</p>
</div>
.wrapper {
  background-color: var(--bg-color, white);
}


p {
  color: black;
}

@container style(--bg-color: black) {
  p {
    color: white;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.