[Issue] TimeInput unreadable when input is selected and primary color is black

[fabriziocucci]

An image speaks more than a thousand of words:

As you can see, the hour TimeInput is selected and pm is selected in the AmPmSwitcher.

Any workaround available until a proper fix is baked?

[fdelacruzsoto]

I'm looking for a workaround like this, in my case the issue is on the buttons, when in dark mode, my primary color is also a dark color, which is difficult to read, it would be great if there is a way to set these colors.

[stuart-clark-45]

I found a work around. Wrap your modals in an another provider and adjust the primary color

import { Provider as PaperProvider } from 'react-native-paper';

const datetimePickerTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#8eb7ff',
  },
};

 <PaperProvider theme={datetimePickerTheme}>
        <DatePickerModal
          locale="en"
          mode="single"
          visible={showDateModal}
          onDismiss={onDismissDateModal}
          date={value}
          onConfirm={noOp}
          onChange={(e: Parameters<SingleChange>[0]) =>
            updateValue(e.date as Date)
          }
          saveLabelDisabled={true}
          saveLabel=" "
          label={label}
          closeIcon="arrow-left"
        />
        <TimePickerModal
          visible={showTimeModal}
          onDismiss={onDismissTimeModal}
          onConfirm={onConfirmTime}
          hours={value?.getHours()}
          minutes={value?.getMinutes()}
        />
</PaperProvider>

[RichardLindhout]

PR is welcome!

[RichardLindhout]

This is fixed now in m2 where primary is black. If you have this in m3 please fix your theme:

You need to have onPrimaryContainer white.

  m3Theme.colors.primaryContainer = '#000000'
  m3Theme.colors.onPrimaryContainer = '#000000' // WRONG!!