script.js

const themeToggleBtn = document.getElementById('theme-toggle')
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')

if (
    localStorage.getItem('color-theme') === 'dark' ||
    (!('color-theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
    // ...then show light icon
    themeToggleLightIcon.classList.remove('hidden')
} else {
    // ...then show dark icon
    themeToggleDarkIcon.classList.remove('hidden')
}

// Listen for toggle button click
themeToggleBtn.addEventListener('click', () => {
    themeToggleDarkIcon.classList.toggle('hidden')
    themeToggleLightIcon.classList.toggle('hidden')

    if (localStorage.getItem('color-theme')) {
        // If light, make dark and save in local storage
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark')
            localStorage.setItem('color-theme', 'dark')
        } else {
            document.documentElement.classList.remove('dark')
            localStorage.setItem('color-theme', 'light')
        }
    } else {
        // if not in local storage
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark')
            localStorage.setItem('color-theme', 'light')
        } else {
            document.documentElement.classList.add('dark'),
                localStorage.setItem('color-theme', 'dark')
        }
    }
})

// Alternative code if you want to refactor because tailwind isn't listening for the 'light' tag at all:
// const toggleDarkMode = function () {
//     document.documentElement.classList.toggle("dark");
//     if (!localStorage.getItem("theme")) {
//       localStorage.setItem("theme", "dark");
//     } else {
//       localStorage.removeItem("theme");
//     }
//   };