Changing Styles Dynamically

element.style.setProperty('--main-color', 'blue');
const value = element.style.getPropertyValue('--main-color');

Using setProperty and getPropertyValue methods
CSS custom properties (variables) can be manipulated using the setProperty() and getPropertyValue() methods. The setProperty method takes the property name (including the -- prefix) and the value. These methods work with both standard CSS properties and custom properties, making them versatile for dynamic style manipulation. This is particularly useful for theming and responsive design implementations.
Using customProperties object
Using setCssVar and getCssVar methods
Using cssVariables object