63 lines
1.8 KiB
JavaScript
63 lines
1.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
const html = document.documentElement;
|
|
|
|
// Check for saved theme preference, default to auto
|
|
const savedTheme = localStorage.getItem('theme') || '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-pressed', theme !== 'auto');
|
|
|
|
// Update button icon
|
|
const themeIcons = {
|
|
light: '🌞',
|
|
dark: '🌙',
|
|
auto: '🌓'
|
|
};
|
|
|
|
themeToggle.textContent = themeIcons[theme];
|
|
|
|
if (theme === 'auto') {
|
|
html.removeAttribute('data-theme');
|
|
} else {
|
|
html.setAttribute('data-theme', theme);
|
|
}
|
|
}
|
|
|
|
themeToggle.addEventListener('click', () => {
|
|
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();
|
|
}
|
|
});
|
|
});
|