I am not able to change the style to PickList and DatePickerModal about react-rainbow

[LeandroTorresSicilia]

Hi @Yusseiin

You need to pass theme in this way:

  const theme = {
    rainbow: {
        palette: {
          brand: "#ff0000",
          success: "",
          mainBackground: "",
          ..
        },
    },
};

Here there is doc about how to use it:
https://react-rainbow.io/#/Customization

[Yusseiin]

Hi @Yusseiin

You need to pass theme in this way:

  const theme = {
    rainbow: {
        palette: {
          brand: "#ff0000",
          success: "",
          mainBackground: "",
          ..
        },
    },
};

Here there is doc about how to use it: https://react-rainbow.io/#/Customization

There is that part in my code:

const theme = {
    rainbow: {
        palette: {
          main: "#ff0000",
          dark: "#ff0000",
          light: "#ff0000",
        },
        background: {
          main: "#000000",
          highlight: "#000000",
          secondary: "#000000",
          disabled: "#000000",
        }
    },
};

And then i recall it here:

<RainbowThemeContainer theme={theme}>
                <Picklist
                    value={selection}
                    placeholder={selection}
                    onChange={handlePicklistChange}
                    style={containerStyles}
                    //variant="inverse"
                     >
                    <Option name="Custom" label="Custom"  />
                    <Option name="Today" label="Today" value = {Today} />
                    <Option name="Yesterday" label="Yesterday" value = {Yesterday}/>
                    <Option name="This Week" label="This Week" value = {Week}/>
                </Picklist>
                
            <DatePickerModal
                title='Select a Date'
                isOpen={isOpen}
                variant="double"
                value={dates}
                selectionType="range"
                onChange={handleDatePickerChange}
                onRequestClose={() => {setOpen(false); handleDatePickerChange(dates)}}
            />
            </RainbowThemeContainer>

but is not changing the color

[Yusseiin]

@LeandroTorresSicilia i think i have found the problem.
in the wiki "https://react-rainbow.io/#/Customization" it says to use background: {, but the correct one is mainBackground:.
For changing the text color what is the correct one? is says text but is not working. I have tryed with

        titleText: theme.palette.secondary[200],
        mainText: theme.palette.secondary[200],
        titleText: theme.palette.secondary[200],
        headerText: theme.palette.secondary[200],
        labelText: theme.palette.secondary[200],
        disabledText: theme.palette.secondary[200],

but no one is working

[LeandroTorresSicilia]

@Yusseiin Right now we don't support changing the text color, you can only change these ones:

Using the code as I said above.
Here is a code sandbox: https://codesandbox.io/s/quirky-dew-rzxj7t?file=/src/App.js