Dispatch event on appearance change

[alxndrmlr]

Great work on the new Dark Mode/Appearance functionality Caleb!

I was source diving to see if there was an easy way for me to listen and react to when the appearance changes, and I found my way to

function applyAppearance(appearance) { 
... 
} 

I'm not an javascript expert, but my understand is that its not easy for me to "listen to value changes on the window" unless you use a "proxy object"...

It would be nice if at the end of this method you could do the following

document.dispatchEvent(new CustomEvent("appearanceChanged", { detail: { appearance } }));

Or something to that effect, that way some of my code (chart.js for example) could listen and react to that so the charts could re-render with the proper dark mode colors. Example from my code...

Alpine.data('userSeniorityChart', Alpine.skipDuringClone(() => {
        let chart

        return {
            init() {
                chart = this.initChart(this.$wire.dataset)

                this.$wire.$watch('dataset', () => {
                    this.updateChart(chart, this.$wire.dataset)
                })

                window.addEventListener('themeChanged', () => {
                    this.updateChartColorScheme(chart)
                })
            },

            destroy() {
                chart.destroy()
                window.removeEventListener('themeChanged', this.updateChartColorScheme)
            },

            updateChart(chart, dataset) {
                chart.data = dataset
                chart.update()
            },

            updateChartColorScheme(chart) {
                const textColor = window.Flux.dark ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.8)'
                const gridColor = window.Flux.dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)'

                chart.options.scales.x.ticks.color = textColor
                chart.options.scales.y.ticks.color = textColor
                chart.options.scales.x.grid.color = gridColor
                chart.options.scales.y.grid.color = gridColor
                chart.update()
            },
            
            // truncated for this discussion on github
            
}

Currently I'm using my own setters for the theme (I had built this before) and ran into needing to retain that when I migrated to the "Flux native approach" wherein I will dispatch my own event.

The other place I use this is I also toggle some style sheets for highlight.js when the appearance changes. Example of my current code...

<script>

    const localStorageKey = 'flux.appearance';

    // TODO: Eventually we will move over to setting values directly instead of this setTheme function.
    // Currently I can't see a way to listen to window.Flux.dark changes and react to them so instead
    // we have our own functions to set the theme and we will emit an event so other components can listen.
    function setTheme(isDark) {
        const lightTheme = document.getElementById('theme-light');
        const darkTheme = document.getElementById('theme-dark');

        lightTheme.disabled = isDark;
        darkTheme.disabled = !isDark;
        document.documentElement.classList.toggle('dark', isDark);
        window.Flux.dark = isDark;

        localStorage.setItem(localStorageKey, isDark ? 'dark' : 'light');
        window.dispatchEvent(new Event('themeChanged'));
    }
    
    // truncated for this discussion on github
</script>