听 CSS 变量变化？

Question

Is it possible to use a callback to listen to CSS variable changes? something like this:

documentElement.addListener('css-var-main-background-color', () => {
  console.log('Value changed');
});

Answer 1

Simple answer: 'No, it's not possible.'

But by using the Window.getComputedStyle() method and checking its return value in an interval (bad for performance) you can watch for and react to style changes.

You can read up on getComputedStyle() here https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Answer 2

Variables defined in style attribute

If you have full control over the code and can set CSS variables via the style attribute on a DOM element rather than using a stylesheet, you can use MutationObserver to detect changes on that element's style attribute and thus detect changes to the variable.

The variables must be set like this:

document.documentElement.style.setProperty('--var1', '1');

and NOT like this:

:root {
--var1: 1;
}

Then you can monitor changes to the style attribute of the target element.

let value = '1';

const styleObserver = new MutationObserver((mutations) => {
  const currentValue = mutations[0].target.style.getPropertyValue('--var1');

  if (currentValue !== value) {
    // the variable has changed
    value = currentValue;
  }
});

styleObserver.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['style'],
});

The above example is for the html element which is usually where you put global variables, but it can work with any other element.

Variables defined in a stylesheet

The most universal solution is to use setInterval and getComputedStyle like the other answer suggests, but this is not something you would like to have in a production environment.

There is a possible workaround if you are willing to define the stylesheet in a specific way:

• Variables must be defined in a <style></style> element
• The style element should contain only the variables you want to watch to keep it as specific as possible and not trigger the observer when unrelated properties change

Then you can use MutationObserver to watch changes to the style element and parse its contents to detect which variables have changed.