function changeTheme(that) {
    const themeName = that.getAttribute('themeName');
    const previewImage = document.getElementById('previewImage');
    const themeStatus = document.getElementById('themeStatus');

    document.body.className = themeName;

    that.parentElement.childNodes.forEach((child) => {
        if (child.classList?.contains('theme-btn--active')) {
            child.classList.remove('theme-btn--active');
        }
    });
    that.classList.add('theme-btn--active');

    let previewImgSrc = null;
    switch (themeName) {
        case 'dark-theme':
            previewImage.src = 'assets/preview-dark.png';
            themeStatus.textContent = 'Selected: Dark'
            previewImgSrc = 'assets/preview-dark.png';
            break;
        case 'monet-dark-theme':
            previewImage.src = 'assets/preview-monet-dark.png';
            themeStatus.textContent = 'Selected: Monet Dark (Custom)'
            previewImgSrc = 'assets/preview-monet-dark.png';
            break;
        default:
            previewImage.src = 'assets/preview-light.png';
            themeStatus.textContent = 'Selected: Light'
            previewImgSrc = 'assets/preview-light.png';
    }

    const featImgs = document.getElementsByClassName('feat-img');
    for (let featImg of featImgs) {
        featImg.src = previewImgSrc;
    }
}