How to detect Dark Mode reactively?

[herronelou]

I'm using the DarkMode button in my project.
I have made a component which sadly I don't think can be styled via tailwind classes (using Plotly graphs), but I still want to grab colors from Tailwind.
I found a solution and made a $: isDark = ... variable, however it is not reactive, because the only ways I have found to check if we're in dark mode is to check document.documentElement.classList.contains('dark') or localStorage.getItem('color-theme'), neither of which seems to trigger reactivity.
Svelte's afterUpdate doesn't seem to trigger either when Dark mode is toggled, so currently my app looks weird if the theme is toggled while looking at my component.

Is there another way to detect that the dark mode was changed without modifying the Darkmode button to use a store instead of localStorage?

[herronelou]

I ended up wrapping my DarkMode component inside another component which installs a MutationObserver and updates a svelte store:

<script lang="ts">
    import { DarkMode } from 'flowbite-svelte';
    import { isDarkTheme } from '$lib/stores/theme';
    import { onMount } from 'svelte';

    const updateTheme = () => {
        isDarkTheme.set(document.documentElement.classList.contains('dark'));
    };

    onMount(() => {
        updateTheme();

        // Make a mutation observer to watch for class changes on ownerDocument.documentElement
        // and update the theme accordingly
        const darkModeObserver = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'class') {
                    updateTheme();
                }
            });
        });
        // Observe changes to the class attribute of the ownerDocument.documentElement
        darkModeObserver.observe(document.documentElement, {
            attributes: true,
        });
    });

</script>

<DarkMode />