50 lines
1.8 KiB
JavaScript
50 lines
1.8 KiB
JavaScript
const toggleButton = document.getElementById('theme-toggle');
|
|
const themeIcon = document.getElementById('theme-icon');
|
|
const themeSound = document.getElementById('theme-sound');
|
|
|
|
// Function to update the theme icon based on the current theme
|
|
const updateThemeIcon = (isDarkMode) => {
|
|
const themeMode = isDarkMode ? 'darkMode' : 'lightMode';
|
|
const iconPath = themeIcon.querySelector('use').getAttribute('href').replace(/#.*$/, `#${themeMode}`);
|
|
themeIcon.querySelector('use').setAttribute('href', iconPath);
|
|
};
|
|
|
|
// Function to update the theme based on the current mode
|
|
const updateTheme = (isDarkMode) => {
|
|
const theme = isDarkMode ? 'dark' : 'light';
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
updateThemeIcon(isDarkMode);
|
|
};
|
|
|
|
// Function to toggle the theme
|
|
const toggleTheme = () => {
|
|
const isDarkMode = toggleButton.checked;
|
|
updateTheme(isDarkMode);
|
|
themeSound.play();
|
|
localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
|
|
|
|
// Add transition class to body for smooth transition
|
|
document.body.classList.add('theme-transition');
|
|
setTimeout(() => {
|
|
document.body.classList.remove('theme-transition');
|
|
}, 300);
|
|
};
|
|
|
|
// Event listener for theme toggle
|
|
toggleButton.addEventListener('change', toggleTheme);
|
|
|
|
// Function to initialize the theme based on the stored preference
|
|
const initializeTheme = () => {
|
|
const storedTheme = localStorage.getItem('theme');
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
const isDarkMode = storedTheme === 'dark' || (!storedTheme && prefersDark);
|
|
toggleButton.checked = isDarkMode;
|
|
updateTheme(isDarkMode);
|
|
};
|
|
|
|
// Initialize the theme
|
|
initializeTheme();
|
|
|
|
// Listen for changes in system preference
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', initializeTheme);
|