62 lines
No EOL
1.7 KiB
JavaScript
62 lines
No EOL
1.7 KiB
JavaScript
/**
|
|
* Theme handling functionality
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const themeToggle = document.querySelector('.theme-toggle-icon');
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', function () {
|
|
const currentTheme = document.documentElement.getAttribute('data-theme') || 'system';
|
|
let newTheme;
|
|
|
|
if (currentTheme === 'dark') {
|
|
newTheme = 'light';
|
|
} else {
|
|
newTheme = 'dark';
|
|
}
|
|
|
|
// Update theme
|
|
document.documentElement.setAttribute('data-theme', newTheme);
|
|
|
|
// Store preference
|
|
localStorage.setItem('theme_preference', newTheme);
|
|
|
|
// Update icon
|
|
updateThemeIcon(newTheme);
|
|
});
|
|
|
|
// Initialize theme on page load
|
|
initTheme();
|
|
}
|
|
|
|
function initTheme() {
|
|
// Get saved preference
|
|
let theme = localStorage.getItem('theme_preference');
|
|
|
|
// If no preference, check system preference
|
|
if (!theme) {
|
|
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
theme = 'dark';
|
|
} else {
|
|
theme = 'light';
|
|
}
|
|
}
|
|
|
|
// Apply theme
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
|
|
// Update icon
|
|
updateThemeIcon(theme);
|
|
}
|
|
|
|
function updateThemeIcon(theme) {
|
|
const icon = document.querySelector('.theme-toggle-icon i');
|
|
if (icon) {
|
|
if (theme === 'dark') {
|
|
icon.className = 'fas fa-sun';
|
|
} else {
|
|
icon.className = 'fas fa-moon';
|
|
}
|
|
}
|
|
}
|
|
});
|