Refactor common theme support into heatmap_shared.js

Author: hugovk

Lib/profiling/sampling/_heatmap_assets/heatmap.js

@@ -15,38 +15,13 @@ let coldCodeHidden = false;
 // ============================================================================
 
 function toggleTheme() {
-    const html = document.documentElement;
-    const current = html.getAttribute('data-theme') || 'light';
-    const next = current === 'light' ? 'dark' : 'light';
-    html.setAttribute('data-theme', next);
-    localStorage.setItem('heatmap-theme', next);
-
-    // Update theme button icon
-    const btn = document.getElementById('theme-btn');
-    if (btn) {
-        btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
-        btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
-    }
+    toggleAndSaveTheme();
     applyLineColors();
 
     // Rebuild scroll marker with new theme colors
     buildScrollMarker();
 }
 
-function restoreUIState() {
-    // Restore theme from localStorage, or use browser preference
-    let theme = localStorage.getItem('heatmap-theme');
-    if (!theme) {
-        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    document.documentElement.setAttribute('data-theme', theme);
-    const btn = document.getElementById('theme-btn');
-    if (btn) {
-        btn.querySelector('.icon-moon').style.display = theme === 'dark' ? 'none' : '';
-        btn.querySelector('.icon-sun').style.display = theme === 'dark' ? '' : 'none';
-    }
-}
-
 // ============================================================================
 // Utility Functions
 // ============================================================================

Lib/profiling/sampling/_heatmap_assets/heatmap_index.js

@@ -19,36 +19,10 @@ function applyHeatmapBarColors() {
 // ============================================================================
 
 function toggleTheme() {
-    const html = document.documentElement;
-    const current = html.getAttribute('data-theme') || 'light';
-    const next = current === 'light' ? 'dark' : 'light';
-    html.setAttribute('data-theme', next);
-    localStorage.setItem('heatmap-theme', next);
-
-    // Update theme button icon
-    const btn = document.getElementById('theme-btn');
-    if (btn) {
-        btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
-        btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
-    }
-
+    toggleAndSaveTheme();
     applyHeatmapBarColors();
 }
 
-function restoreUIState() {
-    // Restore theme from localStorage, or use browser preference
-    let theme = localStorage.getItem('heatmap-theme');
-    if (!theme) {
-        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    document.documentElement.setAttribute('data-theme', theme);
-    const btn = document.getElementById('theme-btn');
-    if (btn) {
-        btn.querySelector('.icon-moon').style.display = theme === 'dark' ? 'none' : '';
-        btn.querySelector('.icon-sun').style.display = theme === 'dark' ? '' : 'none';
-    }
-}
-
 // ============================================================================
 // Type Section Toggle (stdlib, project, etc)
 // ============================================================================

Lib/profiling/sampling/_heatmap_assets/heatmap_shared.js

@@ -39,6 +39,42 @@ function intensityToColor(intensity) {
     return rootStyle.getPropertyValue(`--heat-${level}`).trim();
 }
 
+// ============================================================================
+// Theme Support
+// ============================================================================
+
+// Get the preferred theme from localStorage or browser preference
+function getPreferredTheme() {
+    const saved = localStorage.getItem('heatmap-theme');
+    if (saved) return saved;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+// Apply theme and update UI. Returns the applied theme.
+function applyTheme(theme) {
+    document.documentElement.setAttribute('data-theme', theme);
+    const btn = document.getElementById('theme-btn');
+    if (btn) {
+        btn.querySelector('.icon-moon').style.display = theme === 'dark' ? 'none' : '';
+        btn.querySelector('.icon-sun').style.display = theme === 'dark' ? '' : 'none';
+    }
+    return theme;
+}
+
+// Toggle theme and save preference. Returns the new theme.
+function toggleAndSaveTheme() {
+    const current = document.documentElement.getAttribute('data-theme') || 'light';
+    const next = current === 'light' ? 'dark' : 'light';
+    applyTheme(next);
+    localStorage.setItem('heatmap-theme', next);
+    return next;
+}
+
+// Restore theme from localStorage, or use browser preference
+function restoreUIState() {
+    applyTheme(getPreferredTheme());
+}
+
 // ============================================================================
 // Favicon (Reuse logo image as favicon)
 // ============================================================================