https://www.ctmx.online/assets/js/theme-svg.js

1/**
2 * Theme-aware SVG handler
3 * This script helps SVGs with CSS variables inherit colors from the current theme
4 */
5(function() {
6  // Function to refresh SVGs when theme changes
7  function updateThemeSvgs() {
8    // Find all inline SVGs that might be using theme variables
9    const themeSvgs = document.querySelectorAll('svg');
10
11    // Force refresh by triggering a repaint
12    themeSvgs.forEach(svg => {
13      // Get current display
14      const display = window.getComputedStyle(svg).display;
15
16      // Toggle display to force a repaint
17      svg.style.display = 'none';
18
19      // Force reflow
20      void svg.offsetHeight;
21
22      // Restore original display
23      svg.style.display = display;
24    });
25  }
26
27  // Watch for theme changes
28  const observer = new MutationObserver(mutations => {
29    mutations.forEach(mutation => {
30      if (mutation.attributeName === 'data-theme') {
31        // Theme has changed, update SVGs
32        updateThemeSvgs();
33      }
34    });
35  });
36
37  // Function to initialize the observer
38  function initObserver() {
39    // Start observing the document body for theme attribute changes
40    if (document.body) {
41      updateThemeSvgs(); // Apply initial update
42
43      observer.observe(document.body, {
44        attributes: true,
45        attributeFilter: ['data-theme']
46      });
47    } else {
48      // If body isn't ready, wait a bit and try again
49      setTimeout(initObserver, 100);
50    }
51  }
52
53  // Start when DOM is loaded
54  if (document.readyState === 'loading') {
55    document.addEventListener('DOMContentLoaded', initObserver);
56  } else {
57    initObserver();
58  }
59})();