Setting primary text color?

[hognevevle]

Description

Hi there!

I've currently overriden the primary color to be a custom color provided in theme.extend.colors. The color is, however, of a rather light shade, and the default text-white is not very readable.

Can I provide a "primary text color" that goes better with the primary color?

For example, a blackish text color would be better here. I could of course override every component, but would prefer an easier way.

[noook]

I digged a bit, and unfortunately I don't think there would be a simple solution.

I'll guide you through my investigations, I'll take for my example the <UButton> as a reference.

Let's focus on these lines: UI Config: https://github.com/nuxt/ui/blob/8d9d9736ba6a0f25d8cd0b60e1ca50b072a3d176/src/runtime/ui.config/elements/button.ts#L40-L61

Button class computation: https://github.com/nuxt/ui/blob/8d9d9736ba6a0f25d8cd0b60e1ca50b072a3d176/src/runtime/components/elements/Button.vue#L147-L160

You color, as it is not listed in the button.colors is considered as a variant. That means that all the style applied to this will be the ones listed under button.variant[variant]. And this is where text-white is defined. Now, you could either override the text color for every variant, or you could choose the second option.

The second option, is adding a new key under button.color. You can check how it's done for white and black colors for reference, but you can add your own color that you need to customize (something that looks like teal, for you). You'll need to define the variants, let's go for solid.

Now, it's the tricky party. I thought you could just change the properties you want to change, but it actually overrides those from the variants as well, so you'll need to copy every tailwind class from the variant into your new color custom variant, and of course, change the text color.

That's it if you need to customize the behavior of a single color per components.

[noook]

@benjamincanac is that something that will be easier to fix in v3 with Tailwind variants ?

[benjamincanac]

I'm not sure to understand, are we talking about the Button component here?

[hognevevle]

Button is one example, but it's not just that. In my initial post, I have a screenshot of a Chip example. Essentially it relates to any component that uses the primary color as a background, and places some text on top of it.

[noook]

Button was an example here, but OP's question was to know if there was a way to change the text's color used on top of his custom color depending on the lightness of the color (black when shade is under 200 for example)

I know the answer is no as of today as the text color is set independently from the color

[benjamincanac]

Indeed in the current version it's not really possible to do. If we take the Chip component for example, the text color is not based on the actual color prop but hard-coded here: https://github.com/nuxt/ui/blob/dev/src/runtime/ui.config/elements/chip.ts#L3, you can override it of course but for all the colors.

For the Button, you can override any of the variant and change the text color using the text-{color}-{shade} syntax: https://github.com/nuxt/ui/blob/821e15b696b03d0f5e20e001d39f86a8b3cec426/src/runtime/ui.config/elements/button.ts#L56

In v3, it will be much easier indeed as you will be able to override only a specific color: https://github.com/benjamincanac/ui3/blob/dev/src/theme/chip.ts#L8