Change angular material material theme dynamically

Question

I am new to angular and wanted to change the angular material themes dyamically ,I know how to make differnt themes that is by making scss file ,define 3 colors, include mat properties and functions, but then I was adding that file refrence statically in angular.json, but if I have many custom angular material themes I want to refrence the css files dynamalically.

So is there any easy quick and rather optimized way to do that?

P.S I have gone through many post and docs but seems to be confusing in order when it comes to change the theme dyamically like for example if I have toggle then how to refrence the different style rather than the default one?

Any answer would be higly appreciated..!!

Omar Arturo · Accepted Answer · 2020-12-17 16:44:07Z

11

One solution is to build the material color palette in real time. These are the necessary steps:

Define the color palette in CSS variables and then access them.
Assign these variables to the material angular theme.
Using the "tinycolor" library we create a service to generate the palette based on a color.
With JavaScript we update the CSS variables in the DOM.

Here you have an example:

https://stackblitz.com/edit/angular-material-theming-playground

edited Dec 17, 2020 at 16:44

answered Dec 17, 2020 at 16:04

Omar Arturo

1953 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3859651 Over a year ago

when implementing your solution in angular and app-component.ts complains at runtime that 'tinycolor is not defined' what am I missing?

h11 Over a year ago

I am recieving NoSuchMethodError: method not found: 'write$1' on null on the stackblitz

Mohammadreza Askari · Accepted Answer · 2024-11-12 14:44:14Z

@Omar's answer is sounds good to me, but I think updateTheme method is better to be something likes to this:

private updateThemePalette(colors: Color[], theme: string) {
  let _colors: string[] = [];
  colors.forEach((color) => {
    _colors.push(`--theme-${theme}-${color.name}: ${color.hex}`);
    _colors.push(`--theme-${theme}-contrast-${color.name}: ${(color.darkContrast ? 'rgba(0, 0, 0, 0.87)' : 'white')}`);
  });
  let themeEle = document.getElementById('theme-colors');
  if (!themeEle) {
    themeEle = document.createElement('style'); themeEle.id = 'theme-colors';
    document.head.append(themeEle);
  }
  themeEle.innerHTML = `body{${_colors.join(';')}}`;
}

in this way colors are going to set into style tag in head.

Collectives™ on Stack Overflow

Change angular material material theme dynamically

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related