add global css variables in javascript

To add global CSS variables in JavaScript, you first need to create a new style element and append it to the head element of your HTML document. Then, you can set the value of the variables using the setProperty() method.

Here's an example:

index.tsx
// create new style element
const style = document.createElement('style');

// set variables using setProperty method
style.innerHTML = `
  :root {
    --primary-color: red;
    --secondary-color: blue;
  }
`;

// append style element to head
document.head.appendChild(style);
277 chars
14 lines

In this example, we're setting two global CSS variables (--primary-color and --secondary-color) with the values red and blue, respectively. These variables can now be used in your CSS stylesheets by referencing them using the 'var()' function, like so:

h1 {
  color: var(--primary-color);
}
38 chars
4 lines

This will set the text color of all h1 elements to the value of the --primary-color variable, which in this case is red.