I wanted to upgrade from Phonix 1.7.21 to 1.8.0rc-3 and everything works perfectly, except one thing: DaisyUI themes.

I wanted to have the usual light and dark themes but as I previously mentioned the integration doesn’t work.

Here’s a list of stuff I did to get it to work:

First I copy-pasted those files from the default phoenix project:

• assets/vendor/daisyui-theme.js
• assets/vendor/daisyui.js

Added the theme switch:

<script>
      (() => {
        const setTheme = (theme) => {
          if (theme === "system") {
            localStorage.removeItem("phx:theme");
            document.documentElement.removeAttribute("data-theme");
          } else {
            localStorage.setItem("phx:theme", theme);
            document.documentElement.setAttribute("data-theme", theme);
          }
        };
        if (!document.documentElement.hasAttribute("data-theme")) {
          setTheme(localStorage.getItem("phx:theme") || "system");
        }
        window.addEventListener("storage", (e) => e.key === "phx:theme" && setTheme(e.newValue || "system"));
        window.addEventListener("phx:set-theme", ({ detail: { theme } }) => setTheme(theme));
      })();
</script>

I also removed tailwind.config.js and copy-pasted default app.css content to my app’s app.css and it still does not work, I followed each step shown in phoenixdiff.org including changing the config, app.js and all the other stuff, and somehow the integration still fails to work.

I don’t see any errors in the browser console, and the client side looks as if I just had Tailwind(because I do).

Thanks for reading, and hoping for a reply!