Proposal: Optional CSS Variable Overrides for Existing SCSS Styles

[te-ing]

Hi maintainers,
I’d like to ask for your thoughts on a potential enhancement to styling customization, without changing the current philosophy of the project.

I understand that react-datepicker intentionally provides only basic default styles, and that advanced customization is left to users.
In practice, however, many users override colors and styles by targeting internal class names or modifying the compiled CSS.

I’d like to explore whether we could make this a bit easier and more future-proof.

---

Proposal

The idea is to allow existing SCSS color variables (and similar values) to be optionally overridden via CSS custom properties, while keeping the current SCSS values as defaults.

I created a small proof of concept here:

• CSS variables bridge for existing SCSS values
  te-ing@50b89f2

This approach:

• keeps current styles unchanged by default
• does not introduce breaking changes
• allows users to override only what they need via CSS

---

Potential benefits

If this approach is acceptable, it enables:

• easier color customization without deep CSS overrides
• simpler theming (e.g. dark mode) using pure CSS

For example, a basic dark mode theme can be achieved like this:

• Dark mode example
  te-ing@eab5078

If you’re open to this direction, I’d also be happy to add an example to the docs site demonstrating how to customize styles using CSS variables.

I’m open to adjusting the approach or dropping it entirely based on your feedback.
Thanks for your time!