Nebular theme and raw HTML

Question

I use 2 nebular themes: light and dark. A component bind the HTML result from a library to the innerHtml like this:

<div [innerHtml]="songHtml"></div>

I apply custom css to style this content. To make it work, I added

@Component({
    [...]
    encapsulation: ViewEncapsulation.ShadowDom,
})

Now I need to apply theme color like this:

@include nb-install-component() {
    .chords-color-red {
        color: nb-theme(text-color-red)
    }
}

but this is not working... I read that this cannot work with the ViewEncapsulation.

What I also tried (without success):

• ::ng-deep .nb-theme-dark
• safeHtml pipe (with sanitizer) and removing ViewEncapsulation

Is there a way to make it work? Thanks

Answer 1

I finally found something but it's not pretty.

1. I removed the ViewEncapsulation
2. I put every css that I want to apply to the innerHTML in ::ng-deep { }
3. point 2) does not work with nb-install-component so I put every nb-theme outside of the ::ng-deep { } and added ::ng-deep in front of each css group

Note: ng-deep is deprecated but I found no other way to make it work