How to change NativeBase button color

Issue

So I'm trying to make a Toggle button using NativeBase button. I'm struggling with color settings.

• Variants

  Selected: purple('#9747FF') background&outline, white text,

  unSelected: white background, purple('#9747FF') text, lightgray outline

Current code

<HStack space={2}>
<Button
    variant={selectedGender === 'male' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'male' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('male')}
    _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}
>
    남성
</Button>
<Button
    variant={selectedGender === 'female' ? 'solid' : 'outline'}
    outlineColor="#9747FF"
    colorScheme={selectedGender === 'female' ? '#9747FF' : 'white'}
    onPress={() => handleGenderSelect('female')}
    _text={{ color: selectedGender === 'female' ? 'white' : '#9747FF' }}
>
    여성
</Button>
</HStack>```

Solution

One way is to use style to override the default theme. Something like this:

<Button
  variant={selectedGender === 'male' ? 'solid' : 'outline'}
  style={{
    backgroundColor: selectedGender === 'male' ? '#9747FF' : 'white',
    borderColor: '#9747FF',
  }}
  onPress={() => handleGenderSelect('male')}
  _text={{ color: selectedGender === 'male' ? 'white' : '#9747FF' }}>
  Male
</Button>

Another way is to customize components by extending the theme.

Answered By - user18309290