Updated per CodeRabbit review

Author: jimbethancourt

lib/report-view.js

@@ -451,6 +451,10 @@ export function destroyBubbleCharts() {
   bubbleCharts.clear();
 }
 
+// The MediaQueryList for prefers-color-scheme, retained so the listener
+// (and the redraw callback it holds) stays reachable for the page lifetime.
+let systemThemeMediaQuery = null;
+
 /**
  * Binds one delegated listener redrawing charts on theme changes: the
  * rf-theme radios (components/theme-toggle.jsx) for explicit switches and
@@ -468,8 +472,15 @@ export function bindThemeChartRedraw() {
   });
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
     try {
-      window.matchMedia('(prefers-color-scheme: dark)')
-        .addEventListener('change', redrawChartsForTheme);
+      // Retain the MediaQueryList and subscribe with the best listener API
+      // it exposes: addEventListener, or the deprecated addListener on
+      // engines that never grew the modern one.
+      systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      if (systemThemeMediaQuery && typeof systemThemeMediaQuery.addEventListener === 'function') {
+        systemThemeMediaQuery.addEventListener('change', redrawChartsForTheme);
+      } else if (systemThemeMediaQuery && typeof systemThemeMediaQuery.addListener === 'function') {
+        systemThemeMediaQuery.addListener(redrawChartsForTheme);
+      }
     } catch {
       // Older engines without MQL listeners: explicit radios still redraw.
     }

tests/unit/report-view.test.js

@@ -197,6 +197,50 @@ describe('theme-change chart redraw', () => {
     expect(updates.length).toBeGreaterThan(0);
   });
 
+  it('prefers addEventListener when the MediaQueryList supports both listener APIs', () => {
+    installThemeRadios('system');
+    const bound = [];
+    window.matchMedia = () => ({
+      matches: false,
+      addEventListener(type, listener) { bound.push(['modern', type, listener]); },
+      addListener(listener) { bound.push(['legacy', listener]); }
+    });
+    document.documentElement.removeAttribute('data-rf-theme-redraw-bound');
+    bindThemeChartRedraw();
+
+    expect(bound).toHaveLength(1);
+    expect(bound[0][0]).toBe('modern');
+    expect(bound[0][1]).toBe('change');
+    expect(bound[0][2]).toBeTypeOf('function');
+  });
+
+  it('falls back to addListener when the MediaQueryList lacks addEventListener', () => {
+    installThemeRadios('system');
+    let legacyListener = null;
+    window.matchMedia = () => ({
+      matches: false,
+      addListener(listener) { legacyListener = listener; }
+    });
+    document.documentElement.removeAttribute('data-rf-theme-redraw-bound');
+    bindThemeChartRedraw();
+    expect(legacyListener).not.toBeNull();
+
+    // The legacy subscription must drive the same redraw callback.
+    const updates = [];
+    window.Chart = function () { return { update: () => updates.push('redraw') }; };
+    initBubbleChart(document.getElementById('chart_GOD'), 'God Classes', { bubbles: [] });
+    expect(updates.length).toBe(0);
+    legacyListener();
+    expect(updates.length).toBeGreaterThan(0);
+  });
+
+  it('keeps working when the MediaQueryList exposes neither listener API', () => {
+    installThemeRadios('system');
+    window.matchMedia = () => ({ matches: false });
+    document.documentElement.removeAttribute('data-rf-theme-redraw-bound');
+    expect(() => bindThemeChartRedraw()).not.toThrow();
+  });
+
   it('redraws live charts when a theme radio changes', () => {
     installThemeRadios('system');
     bindThemeChartRedraw(); // no-op: already bound above (and possibly earlier files)