49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
// assets/js/main.js
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const featherSun = document.getElementById('feather-sun');
|
|
const featherMoon = document.getElementById('feather-moon');
|
|
|
|
// Function to apply theme based on saved preference or system setting
|
|
const applyTheme = (theme) => {
|
|
if (theme === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
if (featherSun) featherSun.style.display = 'block';
|
|
if (featherMoon) featherMoon.style.display = 'none';
|
|
} else {
|
|
document.body.classList.remove('dark-mode');
|
|
if (featherSun) featherSun.style.display = 'none';
|
|
if (featherMoon) featherMoon.style.display = 'block';
|
|
}
|
|
};
|
|
|
|
// Check for saved theme in localStorage
|
|
const savedTheme = localStorage.getItem('theme');
|
|
// Check for user's system preference
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
// Apply theme on initial load
|
|
if (savedTheme) {
|
|
applyTheme(savedTheme);
|
|
} else if (prefersDark) {
|
|
applyTheme('dark');
|
|
} else {
|
|
applyTheme('light');
|
|
}
|
|
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const isDarkMode = document.body.classList.toggle('dark-mode');
|
|
const newTheme = isDarkMode ? 'dark' : 'light';
|
|
localStorage.setItem('theme', newTheme);
|
|
applyTheme(newTheme);
|
|
});
|
|
}
|
|
|
|
// Feather icons replacement
|
|
if (typeof feather !== 'undefined') {
|
|
feather.replace();
|
|
}
|
|
});
|