customizing theme colors doesn't work.

[Gunnar Oledal]

Hi there!
I tried to follow the instructions on how to customize the theme colors:

import UI, { colors } from '@indielayer/ui';

const app = createApp(App);

app.use(UI, {
  prefix: 'X',
  colors: {
    primary: colors.lime,
    secondary: colors.cyan,
    success: colors.teal,
    warning: colors.fuchsia,
    error: colors.rose,
  },
});

But there is no change to the brand colors. What could be wrong?

<XButton color="primary">Button</XButton> <-- this button is blue instead of lime

For my use case it's essential that I can tweak the available options for the color property of the components.

[João Teixeira]

Thanks for reporting, there was a typo in the documentation. To customize the colors you need to nest it inside theme:

app.use(UI, {
  theme: {
    colors: {
      primary: colors.lime,
      secondary: colors.cyan,
      success: colors.teal,
      warning: colors.fuchsia,
      error: colors.rose,
    },
  },
})