nuxt
Allow custom color for Chip
Package
v4.x
Description
It would be awesome if "color" props on the Chip component would accept more than the default variables color ("error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral")
sometimes, user can set their own colors and it would be useful to simply pass an hex color to the color props
Keep up the great work ❤️
Love the library
Additional context
No response
We use our own color often not only in Badges.
The theming section in the docs explains how you can add your own colors globally.
https://ui.nuxt.com/docs/getting-started/installation/nuxt#themecolors
You can add any color you define in your main.css (or any default tailwind color) to be accessible. In the main.css just use the HEX values or RGB you want.
ui: { theme: { colors: ['primary', 'error', 'gold', 'my-own-defined-color', 'wathever-i-define'] } }
Or in the app.config too:
ui: { colors: { primary: 'blue', secondary: 'purple', tertiary: 'indigo' } }
The colors u want to use are stored in my database, so they are not available at build time Each user can set up their own colors, so having them in app.config is not possible for me in this case
The colors u want to use are stored in my database, so they are not available at build time Each user can set up their own colors, so having them in app.config is not possible for me in this case
This isn't really possible, since in your case, for example, you'd like to send a hex to the color props, except that the component has variants and needs several shades of color to work
However, you can overide the colors by making a tailwind class or a ui object in a computed with the colors you get from your db.
I see, you could solve it via defining a default variable color in CSS/Tailwind config, then inject it via a nuxt plugin.
So you basically just override the app.config on runtime.
But of course your enhancement would be cool and save time, just providing you with an alternative.
I see, you could solve it via defining a default variable color in CSS/Tailwind config, then inject it via a nuxt plugin.
So you basically just override the app.config on runtime.
But of course your enhancement would be cool and save time, just providing you with an alternative.
I was talking more about overriding the component itself with props or classes 😅
I ran into the same problem... It would be great to be able to change the color using props or classes.
I'm 100% positive this was possible on v3 (You could just reference, for example, Tailwind's red color and pass it in the color prop of, say the UBadge component)
