I'm using .isDarkTheme as a class on the <body> of my Angular app.
I then use this class as a reference to play with the Dark or Light theme of the app.
We're working on the transition to Angular 12, and when making a build, we get this warning:
Warning: 1 rules skipped due to selector errors:
:host-context(.isDarkTheme) -> unmatched pseudo-class :host-context
Environment
We're using .isDarkTheme with the :host-context in different ways in the SCSS files.
With an inline class:
:host-context(.isDarkTheme) .container {
background-color: rgba($mat-dark-color, var(--theme-form-background-opacity, $mat-form-alpha));
}
And with nested class:
:host-context(.isDarkTheme) {
.bg,
.select,
.bar {
background-color: var(--theme-background-background, $mat-light-color);
}
}
The warning seems global and not related to a specific file, so is there a way that's not right?
Or is :host-context not a good practice?
Please let me know if you have questions, or if my issue isn't detailed enough. Thanks in advance for your help :)