Change colors on <canvas> when core framework theme mode toggle clicked

code.js

// Watch for class changes on html tag
if (!window.xClassChangeObserverAdded) {
  window.xClassChangeObserverAdded = true;
  
  let previousTheme = document.documentElement.classList.contains('cf-theme-dark') ? 'dark' : 'light';
  
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
        const classList = document.documentElement.classList;
        const currentTheme = classList.contains('cf-theme-dark') ? 'dark' : 'light';
        
        // Only dispatch if theme actually changed
        if (currentTheme !== previousTheme) {
          previousTheme = currentTheme;
          document.dispatchEvent(new Event('x-color-scheme-change'));
        }
      }
    });
  });
  
  observer.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  });
}