Nativebase how to customize Button color in theme without using colorScheme?

Viewed 10

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

0 Answers
Related