A shortcoming of MutationObserver
is that it cannot be used to subscribe to value changes of CSS properties.
While you could resort to requestAnimationFrame
and getComputedStyle
to plug that hole (which you shouldn’t), there is a more performant way to achieve this: leverage the power of CSS transitions in combination with the fairly recent transition-behavior: allow-discrete
. With it, you can set up JavaScript callbacks to respond to changes in computed values of CSS properties – including Custom Properties.