Customizing dark theme with ThemeProvider

[darkbasic]

Explain what you did (Required)

I'm trying to customize the dark theme styles with ThemeProvider, but the documentation doesn't explain how to do so.

Expected behavior (Required)

Should be possible to override both the normal colors and the dark colors, as well with any color provided through custom stylings.

Describe the bug (Required)

export const APP_THEME: Partial<FullTheme> = {
  colors: APP_COLORS,
  Text: {
    style: {
      color: APP_COLORS.primaryText,
    },
  },

<ThemeProvider theme={APP_THEME} useDark={activeColorScheme === 'dark'}>

This is how I currently theme my app using ThemeProvider, while this is how ThemeProvider works:

  constructor(props: { theme: Theme; useDark?: boolean }) {
    super(props);
    const defaultColors = props.useDark ? darkColors : colors;
    this.defaultTheme = deepmerge(
      {
        colors: defaultColors,
      },
      props.theme
    );

As you can see I completely override darkColors because of the provided custom colors. Also how am I supposed to specify a dark color in the previous Text.style.color example?

I see two ways of doing this. First one is implementing something like this:

export const APP_THEME: Partial<FullTheme> = {
  colors: APP_COLORS,
  darkColors: APP_COLORS_DARK,
  Text: {
    style: {
      color: {light: APP_COLORS.primaryText, dark: APP_COLORS_DARK.primaryText},
    },
  },

<ThemeProvider theme={APP_THEME} useDark={activeColorScheme === 'dark'}>

or completely remove the useDark prop:

export const getTheme = (isDark: boolean): Partial<FullTheme> => ({
  colors: isDark ? APP_COLORS_DARK : APP_COLORS,
  Text: {
    style: {
      color: isDark ? APP_COLORS_DARK.primaryText : APP_COLORS.primaryText,
    },
  },

<ThemeProvider theme={getTheme(activeColorScheme === 'dark')}>

What's the intended way of customizing dark themes?

[inakineitor]

Hi! I don't find it clear from the linked pull request or from the updated documentation how to accomplish the above task. When overriding a component's default props, how do you make that depend on a color that changes with the theme mode (light/dark)?

Suppose I have the following override for the slider component:

Slider: {
      animateTransitions: false,
      style: {
        width: '100%',
      },
      thumbStyle: {
        width: 30,
        height: 30,
      },
      thumbTintColor: '', // TODO replace
      thumbTouchSize: {
        width: 45,
        height: 45,
      },
      minimumTrackTintColor: '#f00', // TODO replace
      maximumTrackTintColor: '#00f', // TODO replace
      trackStyle: {
        height: 8,
        borderRadius: 16,
      },
    },

How do I set the thumbTintColor to be equal to the primary color, which changes with the theme mode?

Thank you!

[arpitBhalla]

Try,

Slider: (props,theme)=>({
	thumbTintColor: theme.colors.primary,
	minimumTrackTintColor: theme.mode ==='dark' ? '' :''
})