document.addEventListener('DOMContentLoaded', function () {
    renderMathInElement(document.body, {
        delimiters: [
            { left: '$', right: '$', display: false },
            { left: '$$', right: '$$', display: true },
            { left: '\\(', right: '\\)', display: false },
            { left: '\\[', right: '\\]', display: true },
        ],
    })
})

document.addEventListener('DOMContentLoaded', () => {
    const $toggle = document.querySelector('#toggle-dark-mode')
    const $toggleIcon = document.querySelector('#toggle-dark-mode i')

    // Loads preferred dark from from localStorage or defaults to media query.
    let prefersDarkMode =
        localStorage.getItem('theme') !== undefined
            ? localStorage.getItem('theme') === 'dark'
            : window.matchMedia('(prefers-color-scheme: dark)').matches

    function storePrefersDarkMode(mode) {
        prefersDarkMode = mode
        localStorage.setItem('theme', mode ? 'dark' : 'light')
    }

    function displayToggle() {
        document.body.classList.toggle('dark-mode', prefersDarkMode)
        $toggleIcon.classList.toggle('fa-moon', prefersDarkMode)
        $toggleIcon.classList.toggle('fa-sun', !prefersDarkMode)

        document.dispatchEvent(new CustomEvent('theme:change'))
    }

    $toggle.addEventListener('click', () => {
        storePrefersDarkMode(!prefersDarkMode)
        displayToggle()
    })

    displayToggle()
})