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
|
||||
}
|
||||
|
||||
// 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
|
||||
const headerElement = document.getElementById('header-include');
|
||||
const footerElement = document.getElementById('footer-include');
|
||||
|
@ -82,6 +155,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
includeHTML('header-include', '/includes/header.html', () => {
|
||||
setActiveNavItem();
|
||||
setupNavDropdowns();
|
||||
initThemeToggle();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue