Search code examples
javascriptcsscss-variables

Listen to CSS variable change?

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

  • 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