add global css variables to document in javascript

To add global CSS variables to a document using JavaScript, you can create a new CSS variable using the setProperty() method and attach it to the :rootselector of your stylesheet. Here's an example:

index.tsx
// Create a new CSS variable
document.documentElement.style.setProperty('--primary-color', 'blue');

// Use the CSS variable in your stylesheet
.element {
  background-color: var(--primary-color);
}
199 chars
8 lines

In this example, we created a new CSS variable called --primary-color and assigned it a value of blue. We then used this variable in our .element selector to dynamically set the background color.

By attaching the variable to the :root selector, we make it available globally to all elements in the document.