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

[casoetan]

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)

[IAfanasov]

@casoetan I suppose it would be really nice to have a project source code where you try to apply a dark theme. we could use it to test a solution and probably as a starting point to enhance the documentation with styling guidelines

[AAiff]

For now I created a class to override the bg-light without having to target each instance it's used:

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

Then gave the ngb-datepicker itself a background-color property.

[IAfanasov]

thank you @AAiff ! Looks like pr created for this issue will fix this problem

[casoetan]

The PR does fix this problem

[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 ***@***.***> 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 <#3244?email_source=notifications&email_token=AMOABHZ76RDL4Y5NU7ER6GTP4GPBDA5CNFSM4HZTOXI2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYO7NCQ#issuecomment-505280138>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMOABH6KDDRRG6ZE6IRGBSLP4GPBDANCNFSM4HZTOXIQ> .