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!