// Toggle dark mode
const toggleDarkMode = () => {
document.body.classList.toggle('dark-mode');
// Save preference to localStorage
const isDarkMode = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDarkMode);
};
// Load saved preference
const loadDarkModePreference = () => {
const savedDarkMode = localStorage.getItem('darkMode');
if (savedDarkMode === 'true') {
document.body.classList.add('dark-mode');
}
};
// Listen for system preference changes
const listenForSystemPreference = () => {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
prefersDarkScheme.addEventListener('change', (e) => {
if (!localStorage.getItem('darkMode')) {
if (e.matches) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
});
};
// Initialize
loadDarkModePreference();
listenForSystemPreference();
// Example usage with a button
// HTML:
const toggleButton = document.getElementById('darkModeToggle');
if (toggleButton) {
toggleButton.addEventListener('click', toggleDarkMode);
}
