Better handling of UButton, UBadge, … colors on colored backgrounds

[maximepvrt]

Description

When adding UButton component with ghost or link variant inside a UBanner with links attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.

  <UBanner to="/guide-gouvernance-associative-crise" icon="i-ph-books-duotone" title="Guide Gouvernance Associative" :actions="[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]" close />

Would it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., UPageCTA with solid variant).

Additional context

No response

[benjamincanac]

@maximepvrt You can already do this by wrapping around a dark or light class: https://github.com/nuxt/ui/blob/v3/src/runtime/index.css#L4-L5

[maximepvrt]

@benjamincanac So cool 🤩! But after testing, using the dark class for buttons on a colored background like a banner doesn't always produce the expected colors.

I think it would be useful to introduce a new color, something like reverse (not entirely convinced by the name), as an opposite to neutral. This would ensure proper contrast when placing elements on a dark/color background.

I tried implementing this, and it works quite well by default. The only issue I encountered is with the text color when the button is in solid mode. I haven't tested it with other components yet.

Here’s an example:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'reverse']
    }
  }
})

:root {
    --ui-reverse: var(--color-white);
}

.dark {
    --ui-reverse: var(--ui-color-neutral-900);
}

<UBanner to="/guide-gouvernance-associative-crise" icon="i-ph-books-duotone" title="Guide Gouvernance Associative" :actions="[{label: 'Solid', variant: 'solid', size: 'md'}, {label: 'Outline', variant: 'outline', size: 'md'}, {label: 'Soft', variant: 'soft', size: 'md'}, {label: 'Subtle', variant: 'subtle', size: 'md'}, {label: 'Ghost', variant: 'ghost', size: 'md'}, {label: 'Link', variant: 'link', size: 'md'}]" close />
<UBanner to="/guide-gouvernance-associative-crise" icon="i-ph-books-duotone" title="Guide Gouvernance Associative" :actions="[{label: 'Solid', variant: 'solid', size: 'md', color: 'reverse'}, {label: 'Outline', variant: 'outline', size: 'md', color: 'reverse'}, {label: 'Soft', variant: 'soft', size: 'md', color: 'reverse'}, {label: 'Subtle', variant: 'subtle', size: 'md', color: 'reverse'}, {label: 'Ghost', variant: 'ghost', size: 'md', color: 'reverse'}, {label: 'Link', variant: 'link', size: 'md', color: 'reverse'}]" close />

Regarding the attached screenshots:

• The first image is in light mode, and the second is in dark mode.
• In each screenshot, the top section shows the current version, while the bottom section shows the version using the reverse color.

What do you think? 😊