Android dark mode is switching the text color to white

[gausss]

Hi,

on Android using dark mode the text color switches to white which makes it insivisble in the default settings (See screenshots). Is there a way to change the text color?

[gausss]

I've implemented a custom tooltip component. It works although a bit more complicated than I'd hoped for.

[SoorajChoudhary]

@gausss Please provide me solution. I try for two days

[gausss]

Hi @SoorajChoudhary,

as mentoined I added my own tooltip component here:

<TourGuideProvider
        {...{
          tooltipComponent: (props: TooltipProps) => (
            <TourModal {...props}></TourModal>
          )
        }}
>

In my custom tooltip component I copied the original tooltip component of this repository and replaced the text color (as I mentoined, not the nicest solution ;) but it works)

export const TourModal = ({
  isFirstStep,
  isLastStep,
  handleNext,
  handlePrev,
  handleStop,
  currentStep,
  labels
}: TooltipProps) => (
  <View
    style={{
      borderRadius: 16,
      paddingTop: 24,
      alignItems: 'center',
      justifyContent: 'center',
      paddingBottom: 16,
      width: '100%',
      backgroundColor: 'white'
    }}>
    <View style={styles.tooltipContainer}>
      <Text testID="stepDescription" style={styles.tooltipText}>
        {currentStep && currentStep.text}
      </Text>
    </View>
    <View style={[styles.bottomBar]}>
      {!isFirstStep ? (
        <TouchableOpacity onPress={handlePrev}>
          <Button
            backgroundColor="transparent"
            textColor="grey"
            icon="arrow-back-outline"></Button>
        </TouchableOpacity>
      ) : null}

      <TouchableOpacity onPress={handleStop}>
        <Button
          backgroundColor="transparent"
          textColor="grey"
          label={labels?.skip}></Button>
      </TouchableOpacity>

      {!isLastStep ? (
        <TouchableOpacity onPress={handleNext}>
          <Button
            backgroundColor="transparent"
            textColor="grey"
            icon="arrow-forward-outline"></Button>
        </TouchableOpacity>
      ) : null}
    </View>
  </View>
);

const Z_INDEX: number = 100;
const MARGIN: number = 13;
const OFFSET_WIDTH: number = 4;

const styles = StyleSheet.create({
  tooltip: {
    position: 'absolute',
    paddingHorizontal: 15,
    overflow: 'hidden',
    width: '100%',
    borderRadius: 16,
    paddingTop: 24,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 16,
    zIndex: Z_INDEX - 1
  },
  tooltipText: {
    textAlign: 'left',
    color: 'grey'
  },
  tooltipContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: '80%'
  },
  button: {
    padding: 10
  },
  buttonText: {
    color: '#27ae60'
  },
  bottomBar: {
    marginTop: 10,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  overlayContainer: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    right: 0
  }
});

Hope this helps.

[SoorajChoudhary]

Thanks

On Wed, Feb 21, 2024 at 1:54 AM Sven Gauß @.***> wrote:

Hi @SoorajChoudhary https://github.com/SoorajChoudhary,

as mentoined I added my own tooltip component here:

<TourGuideProvider {...{ tooltipComponent: (props: TooltipProps) => ( <TourModal {...props}> ) }}

In my custom tooltip component I copied the original tooltip component of this repository and replaced the text color (As I mentoined, not the nicest solution ;) but it works)

export const TourModal = ({ isFirstStep, isLastStep, handleNext, handlePrev, handleStop, currentStep, labels }: TooltipProps) => ( <View style={{ borderRadius: 16, paddingTop: 24, alignItems: 'center', justifyContent: 'center', paddingBottom: 16, width: '100%', backgroundColor: 'white' }}>

{currentStep && currentStep.text}

<View style={[styles.bottomBar]}>
  {!isFirstStep ? (
    <TouchableOpacity onPress={handlePrev}>
      <Button
        backgroundColor="transparent"
        textColor="grey"
        icon="arrow-back-outline"></Button>
    </TouchableOpacity>
  ) : null}

  <TouchableOpacity onPress={handleStop}>
    <Button
      backgroundColor="transparent"
      textColor="grey"
      label={labels?.skip}></Button>
  </TouchableOpacity>

  {!isLastStep ? (
    <TouchableOpacity onPress={handleNext}>
      <Button
        backgroundColor="transparent"
        textColor="grey"
        icon="arrow-forward-outline"></Button>
    </TouchableOpacity>
  ) : null}
</View>

);

const Z_INDEX: number = 100; const MARGIN: number = 13; const OFFSET_WIDTH: number = 4;

const styles = StyleSheet.create({ tooltip: { position: 'absolute', paddingHorizontal: 15, overflow: 'hidden', width: '100%', borderRadius: 16, paddingTop: 24, alignItems: 'center', justifyContent: 'center', paddingBottom: 16, zIndex: Z_INDEX - 1 }, tooltipText: { textAlign: 'left', color: 'grey' }, tooltipContainer: { flex: 1, alignItems: 'center', justifyContent: 'space-around', width: '80%' }, button: { padding: 10 }, buttonText: { color: '#27ae60' }, bottomBar: { marginTop: 10, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }, overlayContainer: { position: 'absolute', left: 0, top: 0, bottom: 0, right: 0 } });

— Reply to this email directly, view it on GitHub https://github.com/xcarpentier/rn-tourguide/issues/150#issuecomment-1955007820, or unsubscribe https://github.com/notifications/unsubscribe-auth/A46N7VNHY73ONRXE4MYZ7M3YUUA73AVCNFSM6AAAAABBPSATASVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJVGAYDOOBSGA . You are receiving this because you were mentioned.Message ID: @.***>