how to replace angular theme CSS stylesheet for whole app? - css

Question

First I couldn't import css through index.html and I get MIME type error:
enter image description here
Refused to apply style from 'http://localhost:4200/css/pink-bluegrey.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
if i try to import it through angular.json then I can't insert ID tag id="themeAsset".
Reason why I want to add id is because i want to do this from https://material.angular.io/guide/theming
function changeTheme(themeName) {
document.getElementById('themeAsset').href = /path/to/my/${themeName}.css;
}
so i could change style for whole app styles by click instead of adding classes to every component

Answer 1

Working Stackblitz :- https://stackblitz.com/edit/angular-jrkmhn
I placed my css inside assets folder i.e. myStyles.css
CSS :-
.myDiv {
background-color: black;
}
index.html
<link id="myLink">
<my-app>loading</my-app>
app.component.html
<div class="myDiv">Css Will Load</div>
<button style="margin-top: 2em" (click)="changeTheme('')">Change Theme</button>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
changeTheme(themeName) {
var elem = document.getElementById('myLink');
elem.setAttribute('href','./assets/myStyles.css');
elem.setAttribute('rel','stylesheet');
elem.setAttribute('type','text/css');
}
}