Inlined styles after Angular 12 update

I have just upgraded to my project To Angular 12 which has two lazy-loaded styles:

[
   {
      "inject":false,
      "input":"src/styling/dark-style.scss",
      "bundleName":"dark-style"
   },
   {
      "inject":false,
      "input":"src/styling/light-style.scss",
      "bundleName":"light-style"
   }
]

Both of them are added manually to the index.html and they can be toggled manually using an Angular service.

I have also tried with this in angular.json, but without any success:

"optimization":{
   "styles":{
      "inlineCritical":false
   }
}

The problem is all of these stlyes are added to index.html by the compiler after upgrading to 12, and some of the styles are breaking now, because these extra styles are added to the head section:

  <style>@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark...}}</style><link rel="stylesheet" href="dark-style.css" title="dark-style" media="all" onload="this.media='all'"><noscript><link rel="stylesheet" href="dark-style.css"></noscript>
  <style>@charset "UTF-8";:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark...}}</style><link rel="stylesheet" href="light-style.css" title="light-style" media="all" onload="this.media='all'" disabled=""><noscript><link rel="stylesheet" href="light-style.css"></noscript>

Before Angular 12, these tags were not added automatically, is there any way to get rid of them?