mirror of
https://github.com/python/cpython.git
synced 2025-12-31 04:23:37 +00:00
gh-142927: Tachyon: Start with user's default light/dark theme (#142987)
This commit is contained in:
parent
e46f28c6af
commit
5b5263648f
5 changed files with 40 additions and 53 deletions
|
|
@ -15,37 +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
|
||||
const savedTheme = localStorage.getItem('heatmap-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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Utility Functions
|
||||
// ============================================================================
|
||||
|
|
|
|||
|
|
@ -19,35 +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
|
||||
const savedTheme = localStorage.getItem('heatmap-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';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Type Section Toggle (stdlib, project, etc)
|
||||
// ============================================================================
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
// ============================================================================
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue