changing some props in custom theme has no effect

[zorx]

Describe the bug

I'm trying to implement my own theme following the documentation. However, there are certain parameters that are not being considered, such as UButton "size," "color", "intent" etc.

But when i change UButton "rounded" for example, it works...

To Reproduce

// main
...
import nuxtLabsTheme from './customTheme'

import { createUI } from 'nuxt-ui-vue'

import App from './App.vue'

const app = createApp(App)

const UI = createUI({
  registerComponents: false,
})

app.use(UI, nuxtLabsTheme)

...

// customTheme
export default {
 ...
 UButton: {
    base : {
     ....
       default : {
         ...
         color: "red" <------------------------
       }
    }
 }

Expected behavior
the default color of a button must be red, or i still have a green button

[selemondev]

Have you tried customizing the color of the UButton component using the color prop like this:

 <UButton color="red">
      Button
 </UButton>

[zorx]

i know that i can change the color using the attribute, but what i want is to change the default color, and other stuff using the theme file, which seems to be impossible.

your are using the default theme nuxtLabsTheme to load some configs, and not the one we set when we app.use(UI, theme)

[selemondev]

This issue will be resolved in the next release 😄.

[sirmathays]

Yep, I noticed the same a while ago and after looking around the code I noticed in many components there were direct references to the nuxtLabsTheme located in the package's own files which essentially makes setting your own theme file redundant.