angular/ngbmodal: backdropClass doesnt work

I am trying to change background color of ngbmodal dialog to blue using backdropClass . It doesn't work, why?

my code is:

* component call:

let options: NgbModalOptions = {
        size: 'sm',
        backdrop:'static',
        backdropClass: "light-blue-backdrop"
      };

      var res = this.modalService.open(content, options);

*html component:

<ng-template #content let-modal>
<div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <p>One fine body&hellip;</p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>

* css classes:

.dark-modal .modal-content {
    background-color: red;
    color: white;
  }

.dark-modal .close {
    color: white;
}

.light-blue-backdrop {
    background-color: blue !important;
}

The image you see appears background in black instead of blue:

Simply add a global style (styles folder) with a background definition of a backdrop. Backdrops of ng-bootstrap modals are injected into body tag.

Don't change app ViewEncapsulation, particularly for app component... It's gonna cause you a lot of problems.