How Can I Dynamically Change CSS Variables with JavaScript for Theme Customization?

Dynamic Theme Customization with CSS Variables and JavaScript

Enhancing the user experience through customization is a common goal for web developers. One effective approach involves leveraging CSS variables and JavaScript to effortlessly alter a website's theme.

However, when attempting to implement such a system, one may encounter challenges in modifying the variables defined in the :root scope of the CSS using JavaScript. To address this issue, let's explore a solution that effectively resolves it.

Customizing CSS Variables with JavaScript

The key to modifying CSS variables programmatically lies in utilizing the setProperty() method of the document.documentElement style object. By passing in the variable name and the desired value, you can dynamically alter the variable's value.

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

To illustrate, consider the following example:

function setPrimaryColor(color) {
  document.documentElement.style.setProperty('--primary-color', color);
}

In this function, the primary-color CSS variable is set to the provided color argument. This allows you to seamlessly update the color scheme of your website by changing a single CSS variable.

Implementing a Theme Switch

With the ability to alter CSS variables using JavaScript, you can now implement a robust theme switch system. Consider the following code:

const theme = localStorage.getItem('theme');

function setTheme(newTheme) {
  localStorage.setItem('theme', newTheme);
  
  // Apply the appropriate styles based on the selected theme
  switch (newTheme) {
    case 'light':
      document.documentElement.style.setProperty('--primary-color', '#FFFFFF');
      document.documentElement.style.setProperty('--secondary-color', '#000000');
      break;
    case 'dark':
      document.documentElement.style.setProperty('--primary-color', '#000000');
      document.documentElement.style.setProperty('--secondary-color', '#FFFFFF');
      break;
  }
}

// Initialize the theme based on the stored preference
if (theme) {
  setTheme(theme);
} else {
  setTheme('light');
}

This code persists the user's preferred theme using localStorage and applies the corresponding styles when the theme is changed.

By leveraging the setProperty() method and implementing a theme switch system, you can empower users to customize the look and feel of your website with ease. This approach enables you to create dynamic web experiences that adapt to the user's preferences.

The above is the detailed content of How Can I Dynamically Change CSS Variables with JavaScript for Theme Customization?. For more information, please follow other related articles on the PHP Chinese website!