Как изменить цвет пользовательского свойства CSS с помощью CSS-in-JS?

Question

Предположим, у меня есть следующий код с эмоцией css`` prop:

<div css={css`
  background: var(--bg);
`}>

Но я бы хотел затемнить фон этого div.

Используя sass, это было бы просто сфункция darken (), но я не думаю, что можно использовать sass в эмоциях?

Другой вариант - использовать функцию затемнения javascript, например, такую, как в polished.js:

import { darken } from "polished";

<div css={css`
  background: ${darken(0.2, var(--bg))};
`}>

Однако это также невозможно, поскольку пользовательское свойство CSS, такое как var(--bg), недоступно в области видимости javascript ${ }.

Существует ли какое-либо простое и прямое решение для решения этой проблемы

Answer 1

Может помочь;)

document.querySelector('button').addEventListener('click', () => {
  document.body.style.setProperty('--color', 'blue')
})

:root {
  --color: red;
}

body {
  background: var(--color)
}

<button>TEST</button>

Answer 2

Для darken() самое близкое, что я могу придумать, это использовать brightness() MDN Link

<div css={css`
  filter: brightness(80%);
`}>