hx-trigger from:html with data-bs-theme

[sderuiter]

I'm trying to introduce a theme switcher using Bootstrap 5.3, which is implemented like:

<script>
        document.addEventListener('DOMContentLoaded', (event) => {
        const htmlElement = document.documentElement;
        const switchElement = document.getElementById('darkModeSwitch');
        
        // Set the default theme to dark if no setting is found in local storage
        const currentTheme = localStorage.getItem('bsTheme') || 'dark';
        htmlElement.setAttribute('data-bs-theme', currentTheme);
        switchElement.checked = currentTheme === 'dark';
        
        switchElement.addEventListener('change', function () {
            if (this.checked) {
                htmlElement.setAttribute('data-bs-theme', 'dark');
                localStorage.setItem('bsTheme', 'dark');
            } else {
                htmlElement.setAttribute('data-bs-theme', 'light');
                localStorage.setItem('bsTheme', 'light');
            }
        });
    });
    </script>

Ie, on the html element data-bs-theme="light" of data-bs-theme="dark" is added.

On the page, I'm using HTMX to load content, example:

<div class="plotly" hx-trigger="load" hx-get="/ajax_statistics_plotly_py"></div>

which works well and loads a plotly.py graph into a div.

As Plotly uses templates, my goal it to have HTMX trigger a reload when the theme switches.
I thought adding from:html would work, see below, but this does not trigger the hx-get.

<div class="plotly" hx-trigger="load,from:html" hx-get="/ajax_statistics_plotly_py"></div>

Is this even possible?

[Telroshan]

Hey, you're using the load event here, which according to its doc, only fires once when the full page loads

The load event is fired when the whole page has loaded

So when doing partial refreshes like here with htmx (or any other client side lib/framework), no load event will be fired again.

What you could do is fire a custom event when switching theme, and using that to trigger a refresh of your element.
So for ex

document.body.dispatchEvent(new CustomEvent("switched-theme"))

And then in your element, use

<div class="plotly" hx-trigger="switched-theme from:body" hx-get="/ajax_statistics_plotly_py"></div>

Besides, when you want to listen for an event "everywhere", you should use from:body and not from:html as per the doc, also please note the comma splits hx-triggers, you should just use a space to separate the event name and its modifiers (cf doc)

Hope this helps!