How to get primary or accent color of currently applied theme in angular material 2

Question

I\'m building an app with multiple theme with angular material design 2. I created multiple theme and it\'s working really great. Using this guideline : Angular Material des

Answer 1

I know this is super late to the party, but didn't want to pull a DenverCoder9 after finally figuring out a clean way to do this.

First, go to this link on the angular material2 github and figure out what color palettes your theme is using. (That link points to version 6, so make sure you change the tag to whatever version you're using.)

Then create a variables.scss file in your project somewhere to store the palette references for your theme (the example below uses the palettes for the indigo-pink theme):

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

You can then include the variables.scss file into your style sheets and use mat-color() to get the color for you classes.

/* my-component.scss */
@import "~@angular/material/theming";
@import 'variables.scss';

.my-primary-text {
    color: mat-color($primaryPalette);
}

.my-accent-text {
    color: mat-color($accentPalette);
}

Using this method, you can still use the pre-built themes. It would probably be even cleaner just to re-create the theme using their published documentation, but for now I'm happy with this.

Hopefully that saves the next guy a lot of pain and suffering down the road.

UPDATE: Redefine Default Theme to Prevent OhGodTheyChangedColorsThisRelease

So who knows when angular material might change their theme colors, so its probably a good idea to just re-create the default them.

So building on the previous part of the post, add the mat-light-theme/mat-dark-theme mixins to re-define the new theme.

/* variables.scss */
@import "~@angular/material/theming";

$primaryPalette: mat-palette($mat-indigo);
$accentPalette:  mat-palette($mat-pink, A200, A100, A400);

// the default warn palette is red, so use that if the theme doesn't define one
$warnPalette:    mat-palette($mat-red);

// re-define the indigo-pink theme
$myDefaultTheme: mat-light-theme($primaryDefault, $accentDefault, $warnDefault);

Then in your master root styles.scss for your app,

/* styles.scss */
@import '~@angular/material/theming';
@import './scss/variables.scss';

@include angular-material-theme($defaultTheme);

Make sure you drop the in your index.html for the default stylesheet.

Great! Now if you update angular material and they changed the colors, your good!, And you can update the colors across the app with just mucking with the palettes in variables.scss.