I really struggle with this simple thing.
By default the button color is primary.600, I just want to adapt it for it to be primary.400 which seems more obvious since this is the real primary color.
As there is nearly no documentation on this and to my regret no IDE autocompletion with typescript, I am asking your lights on how to solve the problem
Here is what I have tried so far:
export const theme = extendTheme({
components: {
Button: {
// I tried this after checking directly in ts file for extendTheme implementation
baseStyle: () => ({
bg: 'red.500',
backgroundColor: 'red.500',
})
// as well as
baseStyle: {
bg: 'red.500',
backgroundColor: 'red.500',
}
// also tried with hex colors with no success
},
// Also tried the code in this example: https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 with no success
variants: {
solid(props: Dict) {
const { colorScheme: c } = props;
let bg = `${c}.400`
bg = mode(bg, `${c}.400`)(props);
if (props.isDisabled) {
bg = mode(`muted.300`, `muted.500`)(props);
}
const styleObject = {
_web: {
outlineWidth: 0,
},
bg,
_hover: {
bg: mode(`${c}.600`, `${c}.500`)(props),
},
_pressed: {
bg: mode(`${c}.700`, `${c}.600`)(props),
},
};
return styleObject;
}
}
});
Also tried the code in this example: https://github.com/GeekyAnts/NativeBase/blob/v3.1.0/src/theme/components/button.ts#L72 with no success