how to replace angular theme CSS stylesheet for whole app?

0
votes

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

1
cssangulartheming
<link id="themeAsset" rel="stylesheet" href="./css/pink-bluegrey.css"> This i can't insert through index.html – bullet888

1 Answers

0
votes

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');
}
}