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');
});

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');
});

• javascript
• css
• css-variables

• Are you referring to this type of CSS variables? developer.mozilla.org/en-US/docs/Web/CSS/… – XCS Commented Sep 14, 2019 at 10:37
• ask yourself ... how do css variables change? – Jaromanda X Commented Sep 14, 2019 at 10:38
• seems like related to this stackoverflow.com/questions/55590763/… – Praveen Soni Commented Sep 14, 2019 at 10:38
• and this stackoverflow.com/questions/2157963/… – Praveen Soni Commented Sep 14, 2019 at 10:39
• @PraveenSoni - your first related link: this only works with inline styles - how is that relevant to CSS "variables"? – Jaromanda X Commented Sep 14, 2019 at 10:40

2 Answers 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

It is possible 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.

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