How to get list of available themes? (Vite + React + UnoCSS + unocss-preset-daisy)

[Avaray]

I wish to create menu to switch themes, but I don't know how to import list of themes that I use.
Let's say I specified 3 official themes (to remove unused themes) and 2 custom themes in vite.config.js file.
So I have 5 themes in my react project. Is there any simple/short way to import list of these themes as array of strings (let's say in my Header component)?

Edit: After building project for production I can see list of themes in CSS. But that's Not what I'm searching for.

[saadeghi]

Here's a way:

you can put themes in a js file, and import it both in tailwind config and your page:

https://stackblitz.com/edit/daisyui-vite-ug9u4q/?file=src%2Fthemes.js,src%2Fmain.js,tailwind.config.js

[Avaray]

I was thinking about something different, but this solution seems to be good. Thanks for your response :)

[rahul-thapa]

@saadeghi Now that tailwind v4 as well as daisyui v5 both use css configs, how do you suggest getting the available themes without maintaining a separate list?

This is my current approach but is there a way to get it directly?

@import "tailwindcss";
@plugin "daisyui" {
  themes: dracula --default, light;
  root: ":root";
  logs: true;
}

:root {
  --available-themes: dracula, light;
  --default-theme: dracula;
}

js

function getAvailableThemes() {
  const themesProperty = getComputedStyle(document.documentElement).getPropertyValue("--available-themes").trim();

  return themesProperty
    .split(",")
    .map((theme) => theme.trim())
    .filter((theme) => theme.length > 0);
}