Changing Theme

Using jQuery

We will create jQuery code so if the user clicks on the Light Theme button, you will apply the appropriate class to make the whole page lighter. The image below will also be changed to show the image of the sun! If the Dark Theme button is clicked, the image of the moon will be displayed and the appropriate class will be applied to the whole page as well.

HTMX Triggers

An HTMX element can have multiple event triggers by including the events as a comma-separated list in the hx-trigger attribute.

In the example below, the value in the select dropdown is being sent as part of a POST request to a search API whenever the dropdown is loaded or the value is changed. The results of this request will be displayed in the #results element.


                <select

                  name="city"

                  id="city"

                  hx-select="value"

                  hx-post="/api/search"

                  hx-trigger="change, load"

                  hx-target="#result"

                >...</select>