Package
v4.x
Description
I ran into an issue with UButton when switching between light and dark mode.
In light mode, using the default solid + primary works fine.
But in dark mode, depending on the primary colour, the contrast can get pretty bad (dark background + dark-ish text).
In my case, subtle + neutral looks much better in dark mode, but there’s no way to switch this automatically without wrapping the component and using useColorMode().
It would be nice if component defaults could react to color mode directly.
Something like this in app.config.ts:
ui: {
button: {
default: ({ colorMode }) => ({
variant: colorMode === 'dark' ? 'subtle' : 'solid',
color: colorMode === 'dark' ? 'neutral' : 'primary'
})
}
}Additional context
This could also open the door to more flexible defaults in general, if other context values (not just color mode) were available in that function.
Package
v4.x
Description
I ran into an issue with
UButtonwhen switching between light and dark mode.In light mode, using the default
solid+primaryworks fine.But in dark mode, depending on the primary colour, the contrast can get pretty bad (dark background + dark-ish text).
In my case,
subtle+neutrallooks much better in dark mode, but there’s no way to switch this automatically without wrapping the component and usinguseColorMode().It would be nice if component defaults could react to color mode directly.
Something like this in app.config.ts:
Additional context
This could also open the door to more flexible defaults in general, if other context values (not just color mode) were available in that function.