gh-142927: Tachyon: Start with user's default light/dark theme (#142987)

This commit is contained in:
Hugo van Kemenade 2025-12-20 03:36:09 +02:00 committed by GitHub
parent e46f28c6af
commit 5b5263648f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 40 additions and 53 deletions

View file

@ -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
// ============================================================================

View file

@ -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)
// ============================================================================

View file

@ -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">

View file

@ -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">

View file

@ -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)
// ============================================================================