fix(theme plugin): use prefix to generate custom theme blocks

[pdanpdan]

daisyui/theme plugin now:

• tries to read and use the root option (but it is not the option passed to the daisyui plugin, it must be passed to the daisyui/theme plugin)
• does not use the prefix option

I cannot find a way to use the same options in both plugins, so what this fixes is:

• to also use the prefix option (both root and prefix options must be passed to the daisyui/theme plugin)

There are also some small tweaks:

• consistency in quoting theme names
• remove redundant checking if root is ':root' to build the dark-mode selector

ref #4513
example of bad behavior: https://play.tailwindcss.com/dwkjhIRnuv?file=css

The code generated by the example (only relevant parts):

/* original themes */
@layer base {
  :root:has(input.d-theme-controller[value=light]:checked),[data-theme=light] {
    color-scheme: light;
    --color-primary: oklch(45% 0.24 277.023);
  }
}
@layer base {
  :root:has(input.d-theme-controller[value=dark]:checked),[data-theme=dark] {
    color-scheme: dark;
    --color-primary: oklch(58% 0.233 277.117);
  }
}
/* first set of overwritten themes - notice absence of prefix */
@layer base {
  :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] {
    color-scheme: light;
    --color-primary: oklch(63% 0.237 25.331);
  }
}
@layer base {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --color-primary: oklch(72% 0.219 149.579);
    }
  }
}
@layer base {
  :root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: oklch(72% 0.219 149.579);
  }
}
/* second set of overwritten themes - notice absence of prefix */
@layer base {
  :where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme="light"] {
    color-scheme: light;
    --color-primary: oklch(55% 0.027 264.364);
  }
}
@layer base {
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --color-primary: oklch(79% 0.184 86.047);
    }
  }
}
@layer base {
  :root:has(input.theme-controller[value=dark]:checked),[data-theme="dark"] {
    color-scheme: dark;
    --color-primary: oklch(79% 0.184 86.047);
  }
}

[pdanpdan]

A fixed play (after the changes in this PR) would need to include the prefix (and root if needed) for each call to daisyui/theme: https://play.tailwindcss.com/AO6SXsZotq?file=css

@saadeghi do you have a solution for sharing the options from the call to the daisyui plugin?

[saadeghi]

@saadeghi do you have a solution for sharing the options from the call to the daisyui plugin?

You mean using the prefix defined in daisyui plugin, in the daisyui/theme plugin?

[pdanpdan]

Yes

[saadeghi]

I don't think so. Unless we read the file manually instead of using the Tailwind API, but that would create more problems which is not worth it.

By the way, do we need prefix for the themes? I'm trying to understand in what situation this would be helpful.

[pdanpdan]

The themes set .theme-controller (see above extract)