I am not able to change the style to PickList and DatePickerModal

[Yusseiin]

Hi all, (sorry for bad English) I am trying to change the color of a PickList and DatePickerModal. Referring to the guides, it says to use "RainbowThemeContainer" to change the appearance, but in my case, it is not working. I cannot use "Application" to change the theme because it will change the entire page, and I only want to style these two components. If I use variant="inverse", it changes every color, but I am not able to change it as I prefer. This is my code:

import React, { useState } from 'react';
import { Box } from "@mui/material";
import { Picklist, Option, DatePickerModal, RainbowThemeContainer } from 'react-rainbow-components';
import dayjs from 'dayjs';
const Daily = () => {
  const [isOpen, setOpen] = useState();
  const [dates, setDates] = useState(dayjs().format('YYYY/MM/DD'));
  const [selection, setSelection] = useState(dayjs().format('DD/MM/YYYY'));
  const containerStyles = {
    width: '300px',
  };
  const theme = {
    rainbow: {
        palette: {
          main: "#ff0000",
          dark: "#ff0000",
          light: "#ff0000",
        },
        background: {
          main: "#000000",
          highlight: "#000000",
          secondary: "#000000",
          disabled: "#000000",
        }
    },
};
  const Today = dayjs().format('DD/MM/YYYY');
  const Yesterday = dayjs().add(-1, 'day').format('DD/MM/YYYY');
  const Week = 'From ${dayjs().add(-dayjs().day(), 'day').format('DD/MM/YYYY')} to ${dayjs().add(+7-dayjs().day(), 'day').format('DD/MM/YYYY')}'  ;

  function handlePicklistChange(value) {
    if (value.name === 'Custom') {
      setOpen(true); 
      //setDates();
    }
       else {
        setSelection(value.value);
        console.log('value', value)
    }
}

function formatDates(dates) {
    if (dates) {
        const startDay = new Intl.DateTimeFormat().format(dates[0]);
        if (dates.length > 1) {
            const endDay = new Intl.DateTimeFormat().format(dates[1]);
            return 'From ${startDay  } to ${  endDay}';
        }
        return startDay;
    }
    return '';
}

function handleDatePickerChange(value) {
  const formatedDate = formatDates(value);
  setDates(value);
  setSelection(formatedDate);
}
    return (
      <Box m="1.5rem 2.5rem">
          <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>
      </Box>
    )
};

export default Daily

This is the result

Can someone help me?

[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