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.
