Usage of css custom properties on top of sass variables

Clear and concise description of the problem

Some of us don’t want to use scss/sass, but still want to be able to customize the looks of the calendar. We might use other toolchains that make it hard to incorporate scss, such as tailwind css. It might also be desirable to change the style during runtime, if there is a dark theme for the website for example.

Suggested solution

I suggest you add custom properties to the rbc-calendar css class for all the scss variables, and make use of those everywhere instead of the scss variables. That means it would look something like this:

.rbc-calendar {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  
  --rbc-out-of-range-color: #{$out-of-range-color};
  --rbc-out-of-range-bg-color: #{$out-of-range-bg-color};
  ...
}

And then, you’d use it like this:

.rbc-off-range {
    color: var(--rbc-out-of-range-color);
}

This way, you don’t lose any backwards compatability for those using scss in their builds, while allowing people to use rbc without scss as well as changing themes easily in runtime.

Alternative

No response

Additional context

No response

Validations

• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I’m willing to open a PR

[PooSham]

@cutterbl Have you thought more about it?

[cutterbl]

@PooSham I think this is a great idea. Happy to test and a approve a PR.