Support daisyUI themes config

[philippedasilva-orizone]

I couldn't find a way to create a custom theme and have it applied as per the daisyui documentation.

Since with unocss, we don't have the tailwindcss config file, how one would introduce a new theme?

Thanks

[rashidpathiyil]

I am also looking for that, did you find a solution @philippedasilva-orizone ?

CC @kidonng

[philippedasilva-orizone]

hi @rashidpathiyil

My approach for custom theme was to retrieve one of the themes in @kidonng daisyui preset dist (under your node_modules directory once installed locally) and create my own [data-theme] css that I added to my main.css file after importing daisyui css themes. It's not the best integration as I had to make use of css variables instead of just properties in a config file but it worked ;)

[jorgv]

has anyone find the right way to set the custom theme in the config?

[peter50216]

https://github.com/peter50216/unocss-preset-daisy/commit/2ac4c8b66649f26f5086958b90924c89453cc809 I added theme support in my fork.

Really glad to see this repo got some activity recently again. @kidonng would adding theme support be something you're willing to take pull request on? I can clean it up and submit a PR for review if that's the case.

[kidonng]

This is indeed an oversight as I haven't used custom themes myself. I saw this issue earlier but didn't get to resolve it because:

1. I was busy with other things
2. I remember UnoCSS does provide a theme config
3. Workaround has been mentioned

I dug into this, and there are two ways is a way to specify a custom theme, with the current version:

Outdated info, unsupported since v3.0.0

## Use [UnoCSS's Extend Theme feature](https://github.com/unocss/unocss#extend-theme) Just pass [daisyUI color name](https://daisyui.com/docs/colors/) and value pairs to UnoCSS config. The catch here is you use camelCase instead of kebab-case, and define color grades (e.g. `base-100`) via objects. Basically doing [what the preset does](https://github.com/kidonng/unocss-preset-daisy/blob/431d59de209a239b58bf53019c81e039774fb564/index.ts#L9-L29) yourself[^1]. ```diff export default defineConfig({ plugins: [ unocss({ transformers: [transformerDirectives()], presets: [presetUno(), presetDaisy(), presetIcons()], + theme: { + colors: { + neutral: 'red', + // neutral-focus + neutralFocus: 'green', + // base-100 + base: { + 100: 'blue', + }, + }, + }, }), ], }) ```

Specify colors via CSS variables

As mentioned above, grab the list of CSS variable names and specify them yourself. Though the names are abbreviated so unintuitive.

:root {
    --pf: red;
    --sf: green;
    --af: blue;
    /* Goes on */
}

---

While docs are certainly lacking (I will tackle this later), one potential addition is to allow you specifying colors just like official daisyUI:

export default defineConfig({
    plugins: [
        unocss({
            transformers: [transformerDirectives()],
            presets: [
                presetUno(),
+               // Note: this does not work currently, just a proposed feature
+               presetDaisy({
+                   colors: {
+                       neutral: 'red',
+                       'neutral-focus': 'green',
+                       'base-100': 'blue',
+                   },
+               }),
                presetIcons(),
            ],
        }),
    ],
})

However I don't see this added complexity is worth it. If you are going to customize themes, writing them a little differently compared to official daisyUI shouldn't be that hard. After all, you are using a different framework.

Thoughts? Do you want to have this? Or are the provided solutions enough for your use case?

[^1]: on a side note, if you provide all the colors yourself and don't use any styles that happen to use these rules, you don't need this preset at all, just use transformerDirectives with @kidonng/daisyui.

[peter50216]

Thanks for the detailed response!

For me, the primary reason I want the feature of specifying custom theme as a daisyUI config (that both provided solution of the current version doesn't solve) is the automatically generation of color from base color part:

Setting primary (--p in CSS var) will also got both primary-focus (--pf) and primary-content (--pc) based on the primary color.

Because in my use case I'm also using different themes in different subsection of the page (with https://daisyui.com/docs/themes/#-3), it got tedious pretty quick to set and experiment multiple color themes and all the derived colors.

Also since my use case uses multiple theme support, the proposed "colors" config approach for presetDaisy won't work, and I'd prefer to have the full themes array config as in daisyUI.

[jiangmaniu]

I have the same problem, is there any solution? This plugin does a great job, but this issue is currently the biggest reason I can't use it

[kidonng]

I need to make things clear. You can specify a custom theme via CSS variables, what's lacking currently is as described in https://github.com/kidonng/unocss-preset-daisy/issues/9#issuecomment-1452938606.

{
    presets: [
        presetDaisy({
            themes: [
                {
                    // This is not supported currently
                    mytheme: {
                        primary: 'red',
                        'base-100': 'blue',
                    },
                },
                // This is supported since v3.0.0
                "dark",
                "cupcake",
            ],
        }),
    ],
    // UnoCSS feature
    // This is NOT supported since v3.0.0
    // It works for your own classes, but not for daisyUI components
    theme: {
        colors: {
            primary: 'red',
            base: {
                100: 'blue',
            },
        },
    },
}

Since the current docs about this are outdated/incorrect, I would look into this as soon as possible.

[kidonng]

Supported in v3.1.0 ☺️