Theme switcher: "system" theme

I’m following up on this a bit. In lib/<app>_web/compoents/layouts.exthere is a function theme_toggle/1 with this:

 <button
        class="flex p-2 cursor-pointer w-1/3"
        phx-click={JS.dispatch("phx:set-theme")}
        data-phx-theme="system"
      >
        <.icon name="hero-computer-desktop-micro" class="size-4 opacity-75 hover:opacity-100" />
      </button>

However, here I get stuck because I don’t know enough about the project layout to figure out where I’m supposed to find phx:set-theme. I’ve looked both in assets/js/app.js and priv/static/assets/js/app.js.

All I want to do is have the “system” option respect the user’s desktop setting. An alternative would be to remove the system button altogether. What happens if you use a window manager like WindowMaker or blackbox? Does they even allow you to decide between light/dark theme? And if it doesn’t, maybe the system option isn’t such a great idea.

I realize this is more of a tailwind issue than a Phoenix one. I was just hoping somebody noticed this and had a quick explanation and/or a fix.

The event listener is defined inline in root.html.heex by default. This is to prevent wrongly styling content while js initializes async. Also the theme setup of daisy ui is about supporting arbitrary themes, not just darkmode/lightmode. You can customize how your themes behave in you app.css. All phoenix does is set a theme name.

Thanks, now I get it a bit better. However, I might not understand what the “system” theme is supposed to be. For now, I’m just going to remove it from the selector.