Изменение значения использованной css-переменной

Question

Я ожидал, что в следующем коде получится синий div, а он красный. Как поправить?

:root {
  --base-color: red;
  --color: var(--base-color);
}

main {
  --base-color: blue;
}

div {
  height: 3em;
  background: var(--color);
}

<main>
  <div></div>
</main>

Более подробно: я хочу менять цвет в зависимости от темы и не переопределять для каждой из них вычисляемые значения, поскольку они одинаковы:

:root {
  --base-color: red;
  --color: var(--base-color);
}

.theme1 {
  --base-color: green;
}

.theme2 {
  --base-color: blue;
}

div {
  padding: 1em;
  background: var(--color);
}

body * + * {
  margin-top: 1em;
}

<section>
  <div>Red</div>
</section>

<section class="theme1">
  <div>Green</div>
</section>

<section class="theme2">
  <div>Blue</div>
</section>

Пробовал поиграться с CSS.RegisterProperty, но из этого ничего не вышло.

Answer 1

Вполне ожидаемое поведение. По аналогии:

А вот если b определить уже после того, как была изменена a, тогда все будет работать как ожидалось.

:root {
  --base-color: red;
}

main {
  --base-color: blue;
  --color: var(--base-color);
}

div {
  height: 3em;
  background: var(--color);
}

<main>
  <div></div>
</main>

Спасибо @Grundy за наводку. Побочный эффект - придется апплаить дополнительный класс.

:root {
  --base-color: red;

}

.use-vars {
  --color: var(--base-color);
}

.theme1 {
  --base-color: green;
}

.theme2 {
  --base-color: blue;
}

div {
  padding: 1em;
  background: var(--color);
}

body * + * {
  margin-top: 1em;
}

<section>
  <div class="use-vars">Red</div>
</section>

<section class="use-vars theme1">
  <div>Green</div>
</section>

<section class="use-vars theme2">
  <div>Blue</div>
</section>

БЛОГ НА HUSL

Изменение значения использованной css-переменной

Ответы (1 шт):