colour of Selection

[mhusnainnnaseer786]

How can I change the colour of selection?

[avivek]

I am also looking for some direction on how to modify the CSS styles.

[jufemaiz]

The colours are not extracted into scss variables (ref: https://github.com/onefinestay/react-daterange-picker/blob/master/src/css/react-calendar.scss) so that makes it a little challenging.

[ts-ankit]

any success here ?

[piyush97]

Any updates??

[RowanBurns01]

Has anyone found a solution to this issue? Thanks, Rowan

[arispriyatna95]

i found the solution.

i modified style for dark mode.

this is result:

use @emotion/styled

component DateRangePicker wrapped by div, div modified with styled from emotion and find css of date range for restyle the UI.

example restyle

const ContainerDateRangePicker = styled('div')(({ theme }) => ({

    '& .DateRangePicker__MonthHeader' : {
        ...theme.applyStyles('dark', {
            color: '#FFF',
        }),
    },
    '& .DateRangePicker__WeekdayHeading abbr[title]' : {
        ...theme.applyStyles('dark', {
            color: '#FFF',
        }),
    },
    '& .DateRangePicker__Date--weekend' : {
        ...theme.applyStyles('dark', {
            background: "#221e1e",
        }),
    },
    '& .DateRangePicker__MonthDates' : {
        ...theme.applyStyles('dark', {
            color: '#FFF',
        }),
    },
    '& .DateRangePicker__CalendarSelection' : {
        ...theme.applyStyles('dark', {
            background: '#000',
            border : "1px solid #000"
        }),
    }
}));

and this DateRangePicker wrapped by div

<ContainerDateRangePicker>
    <DateRangePicker
        value={date}
        onSelect={onSelect}
        numberOfCalendars={2}
    />
</ContainerDateRangePicker>

hope it can help you