Utilize native CSS variables

[shaman-apprentice]

Is your feature request related to a problem? Please describe

I would like to switch between dark and light theme based on a css selector. I don't want to be forced to use scss.

Describe the solution you'd like

I want to be able to style the calendar through native CSS variables. Then I can add to my css something like .dark { --cal-bg-primary: black; }

Describe your use case for implementing this feature

When a user toggles between dark and light theme, everything in my app is styled immediately based on CSS variables but this calendar.

Additional context

In the case you are open for a contribution, I would like to open a PR, which migrates the scss variables to native CSS variables.

I have already tested it locally: I copied all .scss files, replaced the scss colors map through variables with the name-schema of $cal-event-color-primary -> var(--cal-event-color-primary) and compiled it to native CSS to test it works as intended. The only thing I could not migrate 1:1 was the scss color.adjust [...] lightness: -5%, which I replaced through a opacity: 95%;

I assume, this would be a major change, in the case the scss colors map is meant to be public API, as I had to replace it completely. Or do you know of a way, how to utilize native CSS variables in scss variables?

Please let me know, what you think.

And thanks for your great library!

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me