Skip to content

gh-142927: Detect system theme in flame graph like in heatmap #144885

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hugovk wants to merge 2 commits into
base: main
Choose a base branch
from
Open

gh-142927: Detect system theme in flame graph like in heatmap #144885

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78bbbcc
Detect system theme in flame graph
hugovk Feb 16, 2026
ee235d3
Move duplicate updateToggleUI function to base.js
hugovk Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 3 additions & 39 deletions Lib/profiling/sampling/_flamegraph_assets/flamegraph.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,18 +83,7 @@ function resolveStringIndices(node) {
// ============================================================================

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('flamegraph-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();

// Re-render flamegraph with new theme colors
if (window.flamegraphData && normalData) {
Expand Down Expand Up @@ -154,17 +143,9 @@ function toggleSection(sectionId) {
}
}

// Restore theme from localStorage, or use browser preference
function restoreUIState() {
// Restore theme
const savedTheme = localStorage.getItem('flamegraph-theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
const btn = document.getElementById('theme-btn');
if (btn) {
btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
}
}
applyTheme(getPreferredTheme());

// Restore sidebar state
const savedSidebar = localStorage.getItem('flamegraph-sidebar');
Expand Down Expand Up @@ -1242,23 +1223,6 @@ function generateInvertedFlamegraph(data) {
return invertedRoot;
}

function updateToggleUI(toggleId, isOn) {
const toggle = document.getElementById(toggleId);
if (toggle) {
const track = toggle.querySelector('.toggle-track');
const labels = toggle.querySelectorAll('.toggle-label');
if (isOn) {
track.classList.add('on');
labels[0].classList.remove('active');
labels[1].classList.add('active');
} else {
track.classList.remove('on');
labels[0].classList.add('active');
labels[1].classList.remove('active');
}
}
}

function toggleInvert() {
isInverted = !isInverted;
updateToggleUI('toggle-invert', isInverted);
Expand Down
2 changes: 1 addition & 1 deletion Lib/profiling/sampling/_flamegraph_assets/flamegraph_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" data-theme="light">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Expand Down
17 changes: 0 additions & 17 deletions Lib/profiling/sampling/_heatmap_assets/heatmap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,23 +203,6 @@ function applyLineColors() {
// Toggle Controls
// ============================================================================

function updateToggleUI(toggleId, isOn) {
const toggle = document.getElementById(toggleId);
if (toggle) {
const track = toggle.querySelector('.toggle-track');
const labels = toggle.querySelectorAll('.toggle-label');
if (isOn) {
track.classList.add('on');
labels[0].classList.remove('active');
labels[1].classList.add('active');
} else {
track.classList.remove('on');
labels[0].classList.add('active');
labels[1].classList.remove('active');
}
}
}

function toggleColdCode() {
coldCodeHidden = !coldCodeHidden;
applyHotFilter();
Expand Down
27 changes: 0 additions & 27 deletions Lib/profiling/sampling/_heatmap_assets/heatmap_shared.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,33 +43,6 @@ function intensityToColor(intensity) {
// 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());
Expand Down
58 changes: 58 additions & 0 deletions Lib/profiling/sampling/_shared_assets/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
// Tachyon Profiler - Shared JavaScript
// Common utilities shared between flamegraph and heatmap views

// ============================================================================
// Theme Support
// ============================================================================

// Storage key for theme preference
const THEME_STORAGE_KEY = 'tachyon-theme';

// Get the preferred theme from localStorage or system preference
function getPreferredTheme() {
const saved = localStorage.getItem(THEME_STORAGE_KEY);
if (saved) return saved;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

// Apply theme and update UI
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
const btn = document.getElementById('theme-btn');
if (btn) {
const moonIcon = btn.querySelector('.icon-moon');
const sunIcon = btn.querySelector('.icon-sun');
if (moonIcon) moonIcon.style.display = theme === 'dark' ? 'none' : '';
if (sunIcon) sunIcon.style.display = theme === 'dark' ? '' : 'none';
}
}

// 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(THEME_STORAGE_KEY, next);
return next;
}

// ============================================================================
// Toggle Switch UI
// ============================================================================

function updateToggleUI(toggleId, isOn) {
const toggle = document.getElementById(toggleId);
if (toggle) {
const track = toggle.querySelector('.toggle-track');
const labels = toggle.querySelectorAll('.toggle-label');
if (isOn) {
track.classList.add('on');
labels[0].classList.remove('active');
labels[1].classList.add('active');
} else {
track.classList.remove('on');
labels[0].classList.add('active');
labels[1].classList.remove('active');
}
}
}
4 changes: 3 additions & 1 deletion Lib/profiling/sampling/heatmap_collector.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,9 @@ def _load_templates(self):
self.file_css = css_content

# Load JS
shared_js = (assets_dir / "heatmap_shared.js").read_text(encoding="utf-8")
base_js = (template_dir / "_shared_assets" / "base.js").read_text(encoding="utf-8")
heatmap_shared_js = (assets_dir / "heatmap_shared.js").read_text(encoding="utf-8")
shared_js = f"{base_js}\n{heatmap_shared_js}"
self.index_js = f"{shared_js}\n{(assets_dir / 'heatmap_index.js').read_text(encoding='utf-8')}"
self.file_js = f"{shared_js}\n{(assets_dir / 'heatmap.js').read_text(encoding='utf-8')}"

Expand Down
4 changes: 3 additions & 1 deletion Lib/profiling/sampling/stack_collector.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,9 @@ def _create_flamegraph_html(self, data):

html_template = (template_dir / "_flamegraph_assets" / "flamegraph_template.html").read_text(encoding="utf-8")
css_content = get_combined_css("flamegraph")
js_content = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
base_js = (template_dir / "_shared_assets" / "base.js").read_text(encoding="utf-8")
component_js = (template_dir / "_flamegraph_assets" / "flamegraph.js").read_text(encoding="utf-8")
js_content = f"{base_js}\n{component_js}"

# Inline first-party CSS/JS
html_template = html_template.replace(
Expand Down
Loading