How to use the current theme color (light/dark) in the style definition inside a Theme

[marianolc]

Hi, I've just created the following theme:

const theme = createTheme({
  lightColors: LightAppColors,
  darkColors: DarkAppColors,
  components: {
    ....
    },
  },
});

I want to change the color of the input when it's disabled so I tried to add the following in the components part:

Input: {
      disabledInputStyle: {
        color: '....',
      },

But the problem is I want to use "secondary" , the one that is for light when it's light, and the one that is for dark then it's dark. But it seems that the only option that works there are pure colors, like "#6465DA", so I would need to add the color manually in every input I need to draw.

Is there any way to achieve this? Or i need to create a single theme for dark/light and the change it manually in the ThemeProvider? Right now is called like this:

    <ThemeProvider theme={theme}>
      ...
    </ThemeProvider>

[arpitBhalla]

Try

Input:(props,theme)=>( {
      disabledInputStyle: {
        color: theme.colors.secondary,
      }),