28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
// toggle-theme.js
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const themeToggleButton = document.querySelector('.js-theme-toggle');
|
|
const htmlElement = document.documentElement;
|
|
const icon = themeToggleButton.querySelector('.icon i');
|
|
|
|
// Toggle theme on button click
|
|
themeToggleButton.addEventListener('click', function () {
|
|
if (htmlElement.classList.contains('theme-dark')) {
|
|
htmlElement.classList.remove('theme-dark');
|
|
htmlElement.classList.add('theme-light');
|
|
localStorage.setItem('theme', 'theme-light');
|
|
|
|
// Change icon to moon (light mode)
|
|
icon.classList.remove('fa-sun');
|
|
icon.classList.add('fa-moon');
|
|
} else {
|
|
htmlElement.classList.remove('theme-light');
|
|
htmlElement.classList.add('theme-dark');
|
|
localStorage.setItem('theme', 'theme-dark');
|
|
|
|
// Change icon to sun (dark mode)
|
|
icon.classList.remove('fa-moon');
|
|
icon.classList.add('fa-sun');
|
|
}
|
|
});
|
|
});
|