31 lines
968 B
JavaScript
31 lines
968 B
JavaScript
const moon = document.getElementById('moon');
|
|
const sun = document.getElementById('sun');
|
|
|
|
moon.addEventListener('click', () => {
|
|
document.documentElement.classList.add('light');
|
|
|
|
// Fade out moon and fade in sun
|
|
moon.style.opacity = '0';
|
|
sun.style.opacity = '1';
|
|
|
|
// After the transition ends, hide the moon and show the sun (for accessibility)
|
|
setTimeout(() => {
|
|
moon.style.display = 'none';
|
|
sun.style.display = 'block';
|
|
}, 100); // Match the duration of the transition (100ms)
|
|
});
|
|
|
|
sun.addEventListener('click', () => {
|
|
document.documentElement.classList.remove('light');
|
|
|
|
// Fade out sun and fade in moon
|
|
sun.style.opacity = '0';
|
|
moon.style.opacity = '1';
|
|
|
|
// After the transition ends, hide the sun and show the moon (for accessibility)
|
|
setTimeout(() => {
|
|
sun.style.display = 'none';
|
|
moon.style.display = 'block';
|
|
}, 100); // Match the duration of the transition (100ms)
|
|
});
|