How to implement dark mode theme?

[CycleBreaker]

Hi! Styling-related questions were asked numerous times, but after a lot of googling and digging around in react-calendar's source files, I still couldn't figure this one out.

I needed to restyle the Calendar, and as stated in Readme on NPM, I imported the original stylesheet. For some reason, editing it didn't affect the style, but I worked around this issue by importing a new file with contents copied from the original one. But my problem is that I have an app with the possibility of switching between light and dark themes, and I can't figure out how to implement this functionality in react-calendar component.

I dug around in the source files and found a variable called baseClassName in Calendar.jsx. I suggested that class names of child components are generated programmatically based on baseClassName's value, so I can just change it to 'react-calendar-light' or 'react-calendar-dark' to get the effect I'm after. But changing the value didn't even affect the parent div's class name, as stated by the browser console. Besides, I found mentions of other classes like '.react-calendar__tile' in other files, so it appears that my theory is incorrect.

Is there any way to achieve the effect I'm after without severely modifying react-calendar? I'm not that experienced yet, and I'm afraid I'll just mess the component up beyond repair.

[wojtekmaj]

You could use usePrefersColorSchemeDark hook to apply class based on user's preference to use dark mode :)

[CycleBreaker]

Thank you for your reply! That's a useful pack of hooks, I could use some of those! But the question is how exactly can I apply a class to override the names of react-calendar's elements.

[CycleBreaker]

I'm still researching the issue. @wojtekmaj Can you please specify what is the purpose of 'className' prop in the API if it only adds a class to the parent element without affecting the children?