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