How do I set the daisy-ui theme in Phoenix?

Phoenix Forum Questions / Help
1

How do I set the daisy-ui theme in a phoenix (--no-live) project? I tried adding to the html tag in the root.html.heex by changing it to <html lang="en" data-theme="cupcake">. But with `checkbox-primary` it does not pick up the primary color of the cupcake theme (it remains the default orange). I also tried adding a script tag after all the script tags in root.html.heex with the following content. But that does not help either.

Thank you.

<script>
localStorage.setItem("phx:theme", "cupcake");
document.documentElement.setAttribute("data-theme", "cupcake");
</script>

2

It looks like the custom themes are disabled by default. You can enable them by modifying the Tailwind config:

@plugin "../vendor/daisyui" {
-  themes: false;
+  themes: all;
}

Source: daisyUI themes ā€” daisyUI Tailwind CSS Component UI Library

Iā€™m assuming you will want to enable only the themes you want, as it will probably keep the bundle size down.

1 Like
3

I forgot to add this initially, but that Tailwind config file is located at assets/css/app.css.

4

Thank you. I went into app.css and changed it there. It works from there.