Can't change accent color

[leeshiela]

Hi! I'm trying to change the accent color of my React project using DayPicker following the documentation provided. My css file is hooked up correctly and when I've modified other classes through the CSS file, it works. However, when I try to modify the accent color, it doesn't change. See code below:

.rdp { --rdp-accent-color: #0066f1; }

Other classes I've modified work, for example:
.rdp-selected { font-weight: bold; font-size: large; background-color: #0066f1; color: white; border-radius: 50%; }

But I'm unable to modify the accent color. Is there something I'm typing wrong at the top that isn't grabbing the accent color selector? Thank you!

[rodgobbi]

Hi @leeshiela,
The CSS variables are defined in the .rdp-root class, link to docs.
Check if using .rdp-root works.

[leeshiela]

Hi, thanks for writing. I tried that initially and it also didn’t work. I changed it to .rdp when I was reading past discussion posts.

…

On Wed, Jul 30, 2025 at 4:46 PM Rodolfo Gobbi De Angeli < ***@***.***> wrote: Hi @leeshiela <https://github.com/leeshiela>, The CSS variables are defined in the .rdp-root class, link to docs <https://daypicker.dev/docs/styling#css-variables>. Check if using .rdp-root works. — Reply to this email directly, view it on GitHub <#2810 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFBAO63S2V7YZWFSMWYEM5L3LEVMBAVCNFSM6AAAAACCX7IVKSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGOJTHA3DGNQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rodgobbi]

Then it depends on how it's working for you.
If you can create a CodeSandbox reproducing the issue, it would be easier to debug.

You can manipulate the --rdp-accent-color in the browser DevTools like:

If you can find where it is in your setup and how to target it with a CSS selector, you will be able to customize it.

[leeshiela]

Thank you for providing the CodeSandbox. I wasn't able to recreate it in the Sandbox. It seems to be working in my forked sandbox. I did use the browser DevTools to manipulate the accent color and the specific selector I'm targeting (--rdp-selected-border). I'm able to toggle it off and on in the browser DevTools, but when I try to target it with the code below, nothing happens.

.rdp-root { --rdp-accent-color: #0066f1; --rdp-selected-border: #0066f1; }

All my other targets are accessing and styling as expected except for the .rdp-root.

These are working as expected in my globals.css file:

.rdp-day.rdp-today.rdp-selected
.rdp-selected
.rdp-month_caption
.rdp-nav
.rdp-month
.rdp-months
.rdp-weekday

[leeshiela]

Not sure if this matters, but when I changed the color of the chevron, the style sheet for daypicker is accessed first (accent blue) and then the globals.css file is being accessed after (accent gray) and the result I get is some type of mix between the two colors, which is what I see on the screen. I'm sorry I can't upload any pictures right now to show you. It works fine in the sandbox where the chevron gray color overrides the accent color, but not in my project files for some reason. Thank you for your help!

[leeshiela]

Oh! I was able to recreate the bug in the sandbox. Please check it out! https://codesandbox.io/p/devbox/daypicker-bug-report-forked-ccfsp2

[rodgobbi]

Cool, I see now.
So, the issue is the import order, you should import like this:

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

The result in the browser:

In CSS, if two or more selectors have the same specificity, the one defined last will have the styles applied.
When importing default styles, you should import the external default styles first.

[leeshiela]

Thank you! In my project files, I have the global css file defined at the very top level and the day picker style sheet defined in the child component files. If the imports are not in the same file, how does that work as I’m still getting an error in my project files.

…

On Thu, Jul 31, 2025 at 2:33 PM Rodolfo Gobbi De Angeli < ***@***.***> wrote: Cool, I see now. So, the issue is the import order, you should import like this: import { DayPicker } from "react-day-picker";import "react-day-picker/style.css";import "./styles.css"; The result in the browser: image.png (view on web) <https://github.com/user-attachments/assets/612faba4-93ad-4ecc-861d-206291079234> In CSS, if two or more selectors have the same specificity, the one defined last will have the styles applied. When importing default styles, you should import the external default styles first. — Reply to this email directly, view it on GitHub <#2810 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFBAO66BYTHTP2TRZWKIVTL3LJOPDAVCNFSM6AAAAACCX7IVKSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGOJVGA4DANQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[rodgobbi]

If needed, you can use the following CSS trick to increase the specificity of a class without changing the rendered HTML markup :

.rdp-root.rdp-root {
  // ...
}

[leeshiela]

Ah! This was all very helpful! Using the CSS trick helped me finally change the --rdp-selected-border and --rdp-accent-color.

Unfortunately something is up with how the imports are working in the different file structures because the .rdp-chevron {fill: gray; stroke: gray; stroke-width: 0.8px}, which is last on my globals.css file and that file is at the very top level of my app, is combining the two styles into this mix of blue and gray for the chevron arrows instead of just gray. I think it's because it sees I've set the accent color to blue, but the globals.css file is unable to override:

[rodgobbi]

@leeshiela You can apply the same trick to any class if you are unable to fix the import issue.

[leeshiela]

Amazing. Thank you!!