Fix theme toggle button by moving initialization to includes.js
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
This commit is contained in:
parent
26136fef61
commit
f1da69a7f9
|
@ -74,6 +74,79 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
}, 100); // Small delay to ensure the DOM is updated
|
}, 100); // Small delay to ensure the DOM is updated
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Function to initialize theme toggle
|
||||||
|
function initThemeToggle() {
|
||||||
|
const themeToggle = document.getElementById('themeToggle');
|
||||||
|
if (!themeToggle) {
|
||||||
|
console.log('Theme toggle button not found on this page');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check for saved theme preference, default to auto
|
||||||
|
const savedTheme = localStorage.getItem('theme') || 'auto';
|
||||||
|
|
||||||
|
// Set initial value for aria-checked attribute
|
||||||
|
themeToggle.setAttribute('aria-checked', savedTheme !== 'auto');
|
||||||
|
|
||||||
|
updateTheme(savedTheme);
|
||||||
|
|
||||||
|
function updateTheme(theme) {
|
||||||
|
// Update button state and labels
|
||||||
|
const themeLabels = {
|
||||||
|
light: 'Theme mode: Light',
|
||||||
|
dark: 'Theme mode: Dark',
|
||||||
|
auto: 'Theme mode: Auto'
|
||||||
|
};
|
||||||
|
|
||||||
|
themeToggle.setAttribute('aria-label', themeLabels[theme]);
|
||||||
|
themeToggle.setAttribute('aria-checked', theme !== 'auto');
|
||||||
|
|
||||||
|
// Update button icon
|
||||||
|
const themeIcons = {
|
||||||
|
light: '🌞',
|
||||||
|
dark: '🌙',
|
||||||
|
auto: '🌓'
|
||||||
|
};
|
||||||
|
|
||||||
|
themeToggle.textContent = themeIcons[theme];
|
||||||
|
|
||||||
|
const html = document.documentElement;
|
||||||
|
if (theme === 'auto') {
|
||||||
|
html.removeAttribute('data-theme');
|
||||||
|
} else {
|
||||||
|
html.setAttribute('data-theme', theme);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
themeToggle.addEventListener('click', () => {
|
||||||
|
const html = document.documentElement;
|
||||||
|
const currentTheme = html.getAttribute('data-theme') || 'auto';
|
||||||
|
let newTheme;
|
||||||
|
|
||||||
|
switch(currentTheme) {
|
||||||
|
case 'light':
|
||||||
|
newTheme = 'dark';
|
||||||
|
break;
|
||||||
|
case 'dark':
|
||||||
|
newTheme = 'auto';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
newTheme = 'light';
|
||||||
|
}
|
||||||
|
|
||||||
|
updateTheme(newTheme);
|
||||||
|
localStorage.setItem('theme', newTheme);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle keyboard navigation
|
||||||
|
themeToggle.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter' || e.key === ' ') {
|
||||||
|
e.preventDefault();
|
||||||
|
themeToggle.click();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Process header and footer placeholders
|
// Process header and footer placeholders
|
||||||
const headerElement = document.getElementById('header-include');
|
const headerElement = document.getElementById('header-include');
|
||||||
const footerElement = document.getElementById('footer-include');
|
const footerElement = document.getElementById('footer-include');
|
||||||
|
@ -82,6 +155,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||||
includeHTML('header-include', '/includes/header.html', () => {
|
includeHTML('header-include', '/includes/header.html', () => {
|
||||||
setActiveNavItem();
|
setActiveNavItem();
|
||||||
setupNavDropdowns();
|
setupNavDropdowns();
|
||||||
|
initThemeToggle();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue