38 lines
1.7 KiB
JavaScript
38 lines
1.7 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
|
const themeSwitcher = document.getElementById('themeSwitcher');
|
|
const themeIcon = themeSwitcher.querySelector('.iconify');
|
|
const themeText = themeSwitcher.querySelector('.theme-text');
|
|
|
|
// Check for saved theme preference or use system preference
|
|
const savedTheme = localStorage.getItem('theme');
|
|
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
if (savedTheme === 'dark' || (!savedTheme && systemPrefersDark)) {
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.setAttribute('data-icon', 'mdi-weather-night');
|
|
themeText.textContent = 'Dark Mode';
|
|
} else {
|
|
document.body.classList.add('light-mode');
|
|
themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
|
|
themeText.textContent = 'Light Mode';
|
|
}
|
|
|
|
// Theme switcher click handler
|
|
themeSwitcher.addEventListener('click', function() {
|
|
if (document.body.classList.contains('dark-mode')) {
|
|
// Switch to light mode
|
|
document.body.classList.remove('dark-mode');
|
|
document.body.classList.add('light-mode');
|
|
themeIcon.setAttribute('data-icon', 'mdi-weather-sunny');
|
|
themeText.textContent = 'Light Mode';
|
|
localStorage.setItem('theme', 'light');
|
|
} else {
|
|
// Switch to dark mode
|
|
document.body.classList.remove('light-mode');
|
|
document.body.classList.add('dark-mode');
|
|
themeIcon.setAttribute('data-icon', 'mdi-weather-night');
|
|
themeText.textContent = 'Dark Mode';
|
|
localStorage.setItem('theme', 'dark');
|
|
}
|
|
});
|
|
});
|