Remove "bg-light" css class from the datepicker component

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 7.2.2

ng-bootstrap: 4.1.0

Bootstrap: 4.2.1

I think hard coding bg-light into the datepicker makes it difficult to customize it’s theme, especially a dark theme. Most often I’ve had to override every css class attached to the datepicker, adding !important which doesn’t feel right. Can we remove the bg-light class and let this be handled by the dropdown-menu class, allowing the user to override that.

[benouat]

Hey @casoetan ! Thanks to report this evolution.

We could for sure, and we will have to, remove the usage of this .bg-light Bootstrap class. Nonetheless we just can’t rely on .dropdown-menu. Our datepicker can also be opened inline, as a simple calendar, and thus won’t be wrapped by a dropdown!

I think we just need to move all these values to our .ngb-datepicker classes (and children classes also)

[AAiff]

The !important was just a stop-gap until .bg-light was removed, I did see there is a PR which fixes this issue.

In my mind, if you wanted to add themes you’d do it on the base element (ngb-datepicker class=“bg-light” or “bg-dark”) and that would affect nested content by overriding certain styling properties like color and background-color, border, hover effects etc. I’ve only just started working with the component, but you could set nested content to inherit properties from the main component container.

For instance, if you originally had

ngb-datepicker ngb-dp-header.bg-light { color:#333; background-color:#f8f8f8; } and

ngb-datepicker ngb-dp-header.bg-dark { color:#eee; background-color:#333; }

you could instead do the following:

ngb-datepicker.bg-light { color:#333; background-color:#f8f8f8; } and

ngb-datepicker.bg-dark { color:#eee; background-color:#333; }

coupled with:

ngb-datepicker ngb-dp-header, ngb-datepicker ngb-dp-month-name { color:inherit; background-color:inherit; }

to more easily theme your component.

Also, while it is nice that you use common class names like .btn and .dropdown-menu in some areas, these do get overwritten if they are being used elsewhere in someone’s site. I’ve had to create some extra classes to ensure these don’t get overridden in the datepicker (wasn’t really any trouble though).

On Tue, Jun 25, 2019 at 6:44 AM IAfanasov [e-mail] wrote:

@casoetan https://github.com/casoetan thanks for the feed back! may u please elaborate? feel like instead of

ngb-datepicker .bg-light { background-color:inherit!important }

one can do

ngb-datepicker ngb-dp-header, ngb-datepicker ngb-dp-month-name { background-color:inherit; }

which gives possibility to change background without !important

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ng-bootstrap/ng-bootstrap/issues/3244?email_source=notifications&email_token=AMOABHZ76RDL4Y5NU7ER6GTP4GPBDA5CNFSM4HZTOXI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYO7NCQ#issuecomment-505280138, or mute the thread https://github.com/notifications/unsubscribe-auth/AMOABH6KDDRRG6ZE6IRGBSLP4GPBDANCNFSM4HZTOXIQ .