Editing CSS variables with JS

CSS variables are pretty cool. You probably know you can define one like this:

:root {
  --donny-brand-color: purple;
}

and then use it somewhere else later:

.donatellosMask {
  background: var(--donny-brand-color)
}

But did you also know that you can modify or create CSS variables from JS side? You can do this using setProperty method any element’s (in this case documentElement since we defined the variable on :root scope) .style interface.

document.documentElement.style.setProperty('--donny-brand-color', 'red')

This is especially useful when you need to tie some style properties to event listeners, like setting the position of an element to current cursor position. See this example on codepen which brings everything together: