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>```
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.