"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

Question

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because its MIME type ('text/html') is not supported, and strict MIME checking is enabled.

When attempting to import it via angular.json instead, I encountered difficulties adding an ID tag with id="themeAsset".

The reason why I wanted to add the ID is because of my interest in following the theme selection process outlined on https://material.angular.io/guide/theming

The function changeTheme(themeName) was suggested to dynamically update the styles for the entire application by altering the style sheet when a user clicks, rather than applying classes to each component individually:

css angular theming

Answer 1

Answer №1

View my Stackblitz project here: https://stackblitz.com/edit/angular-jrkmhn

All my custom CSS is stored in the assets folder under the name myStyles.css

CSS Style:-

.myDiv {
  background-color: black;
}

index.html

<link id="myLink">
<my-app>loading</my-app>

app.component.html

<div class="myDiv">The CSS Will Render Here</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');
}
}

Answer 2

View my Stackblitz project here: https://stackblitz.com/edit/angular-jrkmhn

All my custom CSS is stored in the assets folder under the name myStyles.css

CSS Style:-

.myDiv {
  background-color: black;
}

index.html

<link id="myLink">
<my-app>loading</my-app>

app.component.html

<div class="myDiv">The CSS Will Render Here</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');
}
}

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

Answer №1

Similar questions

Guide to accessing a newly opened window from a different domain originating from the current window

When using the Google API load callback, the Angular(4) router does not actually replace routes; instead, it stacks them up each time

Is it possible to evaluate a conditional in Angular after retrieving values from a subscription in an observable?

general declarations take precedence over media queries

Looking to extract data from various checkbox options and save it as an array variable

Error: Idle provider not found in the promise

Div failing to expand to fit its contents

Tips for including a close button in a slidedown panel

converting JSON data into an Angular 2 object

Issue with the Dropdown menu in Metro UI CSS - not functioning properly

Do we still need to configure XSRF-TOKEN on the server even when using HttpClientXsrfModule?

How can I modify the custom CSS to adjust the color of a Font Awesome icon?

What steps can be taken to create a progress bar in the input field that spans the entire width of its parent div, reaching

Please upload a collection of chosen files

Ensuring Data Accuracy in Angular 2 Forms

Testing Angular 2 pipes with dependencies using angular-cli

Challenges arise when IE distorts featured images in a Wordpress theme

Tips for altering the appearance of a button when moving to a related page

A guide to designing a responsive flexbox layout with various columns and rows

The click interactions of SVG elements are altered when switching between <img> and <object> elements