set the styles (properties and values) for the root code example
Example 1: css variables
:root {
--background-color: #333;
--text-color: #fff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
Example 2: javascript use css custom properties
Values in JavaScript
To use the values of custom properties in JavaScript, it is just like standard properties.
element.style.getPropertyValue("--my-var");
getComputedStyle(element).getPropertyValue("--my-var");
element.style.setProperty("--my-var", jsVar + 4);