Theme switcher: "system" theme

Phoenix Forum Questions / Help
,
1

I tried setting background color by theme using bg-blue-500 dark:bg-yellow-300 and that worked fine. However, the system/auto theme in the theme switcher (the one that is supposed to use the desktop theme) uses bg-blue-500 although my desktop theme variant is dark.

What is the correct way to set custom colors to an element that works with the system theme variant?

I don’t think it makes any difference but my desktop theme is Breeze dark. Browser is Brave.

2

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.

3

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.

1 Like
4

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.