# Theme switcher: "system" theme

**URL:** <https://forum.elixirforum.com/t/theme-switcher-system-theme/73876>\
**Category:** Questions\
**Tags:** phoenix, tailwindcss\
**Created:** [January 3, 2026, 8:53pm UTC](https://forum.elixirforum.com/t/theme-switcher-system-theme/73876 "2026-01-03T20:53:41Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![lcabrini](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lcabrini/32/32329_2.png) [@lcabrini](https://forum.elixirforum.com/u/lcabrini)\
**Post date:** [January 5, 2026, 9:40am UTC](https://forum.elixirforum.com/t/theme-switcher-system-theme/73876/2 "2026-01-05T09:40:58Z")

</div>

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

```elixir
 <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.

---

_[View the full topic](https://forum.elixirforum.com/t/theme-switcher-system-theme/73876)._