Not able to change the color of selected date and its range

[BraveEvidence]

Thanks for reporting a bug for DayPicker. Please provide here a brief description of the issue you’ve encountered.

To reproduce

https://codesandbox.io/p/sandbox/daypicker-bug-report-forked-yqxffx

Here is the code

import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

export default function App() {
  return  <DayPicker
            mode="range"
            disabled={{
              after: new Date(),
            }}
          />;
}

Actual Behavior

I don't know how to change the color of the date which has been picked as well as the range which has been picked

Expected Behavior

Should be able to change color of the date which has been picked as well as the range which has been picked

Screenshots

Check the above screenshot, the background color of the selected date is blue and the range is light blue, how to change this color?

[gpbl]

@BraveEvidence thanks for your feedback!

You can override the --rdp-range_middle-background-color CSS variables in the .rdp-root:

/* ./styles.css */
.rdp-root {
  --rdp-range_middle-background-color: orange;
}

in your JavaScript file, make sure you import the custom styles after the react-day-picker/styles.css:

import { DayPicker } from "react-day-picker";

// Make sure react-day-picker/style.css is before your custom style
import "react-day-picker/style.css";

import "./styles.css"; // Include custom styles

See this codesandbox:
https://codesandbox.io/p/sandbox/daypicker-bug-report-forked-vfjklj?file=%2Fsrc%2FApp.tsx%3A6%2C34&workspaceId=c9c7c415-3883-483b-9f1c-8a70ae6a6363

[BraveEvidence]

@gpbl Thanks for the reply, what about the blue color for the selected date, any ideas?