How Can I Change CSS :root Color Variables Using JavaScript?

Changing CSS :root Color Variables with JavaScript

In web development, it's often desirable to dynamically adjust the appearance of a webpage based on user preferences or external conditions. One common way to accomplish this is by leveraging CSS custom properties, also known as CSS variables. These variables, stored in the :root element, provide a means to centrally control the colors and other aspects of a webpage.

To modify these color variables via JavaScript, the standard CSS.setProperty() method is employed. This method allows you to set or modify a CSS property or custom property.

In the provided code, the original approach utilized the jQuery library to directly set the --main-color variable. However, this approach was unsuccessful because it's not the standard way of modifying CSS variables.

The correct implementation for changing the :root color variable using JavaScript is:

document.documentElement.style.setProperty('--main-color', '#YOURCOLOR');

This line directly modifies the computed style of the document's root element, updating the value of the --main-color variable. By specifying the variable name and a new color value, you can effectively change the theme of your webpage by altering the color scheme.

The above is the detailed content of How Can I Change CSS :root Color Variables Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!