Support for bootstrap dark theme

[uler3161]

Is your feature request related to a problem? Please describe

Doesn't render very well at all when using bootstrap dark theme (data-bs-theme="dark")

Describe the solution you'd like

Ideally, out of the box support for bootstrap dark theme.

Describe your use case for implementing this feature

I have a way users can choose either light or dark theme. This should retheme the calendar to match.

Additional context

I'm not great at css, but I threw this together:

::ng-deep .cal-month-view,
::ng-deep .cal-week-view,
::ng-deep .cal-day-view,
::ng-deep .cal-month-view .cal-cell-row:hover,
::ng-deep .cal-month-view .cal-day-cell.cal-today,
::ng-deep .cal-month-view .cal-cell-row .cal-cell:hover,
::ng-deep .cal-month-view .cal-cell.cal-has-events.cal-open,
::ng-deep .cal-week-view .cal-day-headers,
::ng-deep .cal-week-view .cal-header.cal-today,
::ng-deep .cal-week-view .cal-time-events .cal-day-columns:not(.cal-resize-active) .cal-hour-segment:hover,
::ng-deep .cal-week-view .cal-hour-odd {
  background-color: initial;
}

::ng-deep .cal-month-view .cal-day-cell.cal-weekend .cal-day-number,
::ng-deep .cal-week-view .cal-header.cal-weekend span {
  color: initial;
}

For the most part, this works ok. The main issue I see is on the week view. When the browser isn't tall enough to render all the hour rows, I'm showing a scrollbar. When you scroll, the header stays at the top as expected, but the rows are visible behind the header. Almost like background-color:initial is making the header transparent.

[matts-bot[bot]]

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

[mattlewis92]

Please see the dark theme demo for how to make this work: https://mattlewis92.github.io/angular-calendar/#/dark-theme