angular material using theme colors

Question

I am using angular 5 material and i created a theme.scss as below theme.scss

 @import '~@angular/material/theming';
    @include mat-core();

    $custom-primary: mat-palette($mat-deep-purple,600);
    $custom-accent:  mat-palette($mat-lime, 100);
    $custom-warn:    mat-palette($mat-red);

    $custom-theme: mat-light-theme($custom-primary, $custom-accent, $custom-warn);

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

    // ALTERNATIVE THEME

    $alt-primary: mat-palette($mat-yellow);
    $alt-accent:  mat-palette($mat-grey, 200);

    $alt-theme: mat-dark-theme($alt-primary, $alt-accent);

    .alternative {
        @include angular-material-theme($alt-theme);
    }

I have my default styles.scss as below style.scss

   @import "~@angular/material/prebuilt-themes/indigo-pink.css";

        .fa-icon-nav {
            color: #507889;
            font-size: x-large;
        }

The color is currently hardcoded in the fa-icon-nav. I want it to use primary color from the currently selected theme. Please advise how this would work if possible? Happy to hear if this is totally the wrong way to do it and how it should be done.

AlokeT · Answer 1 · 2018-04-14T07:24:18.550

EDIT:

ADDED ONLINE DEMO

I am working on a project where I used the Material 2 Themes and I used this approach where I use the class name and add colors class globally.

This is what I did :

FileName: mytheme-sidemenu.scss:

// Import all the tools needed to customize the theme and extract parts of it
@import "~@angular/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}

Here is my main theme file: mytheme-theme.scss:

@import '~@angular/material/theming';
@import './variables/helper.scss';
@import './variables/spacemanager.scss';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-light-blue, 700, 600);
$mytheme-app-accent: mat-palette($mat-pink, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-blue-grey, 500);
    $mytheme-alt-accent: mat-palette($mat-pink, 500);
    $mytheme-alt-warn: mat-palette($mat-deep-orange);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

and in app.module.ts update this :

export class AppModule {
  constructor(
    @Inject(OverlayContainer) private overlayContainer: OverlayContainer
  ) {
    this.overlayContainer
      .getContainerElement()
      .classList.add("mytheme-alt-theme"); // this for double theme add to the root css class
  }
}

This is already asked and I just copy paste my answer from here

EDIT :

As per your need, you can achieve this:

I have my default styles.scss as below style.scss that you need to change to _theme-color.scss

 .fa-icon-nav {
  color: mat-color($primary, 500) !important; // 500, 600 , 700 check material color pallet for more info
  // You can use this too
  // color: mat-color($alt-primary, 500) !important;
  font-size: x-large;
}

or you can use this material color library from here

thanks for responding. but i dont think this is all needed for my simpler requirement of just finding current theme primary or accent colors. any advise to modify my existing css to just pull needed info? — Vik, Apr 05 '18 at 19:25
@Vk I'm afraid that this way may be the only way to do it. Otherwise, you may just have to result to hardcoding your values. — Edric, Apr 06 '18 at 13:05
may be i m failing to understand Aloke. Can u modify ur answer to fit into how it will work in my example? — Vik, Apr 06 '18 at 18:37
well your edit sounds that i can use either $primary or $alt-primary. however, my need is to be able to switch to one of the two based on my selected theme. if i will hardcode the theme variable then it wont change. makes sense? — Vik, Apr 13 '18 at 21:33
did not understand have my default styles.scss as below style.scss that you need to change to _theme-color.scss as why it is needed — Vik, Apr 13 '18 at 21:35
@Vik: have a look at https://material.angular.io/guide/theming-your-components and https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 They describe a way to achieve different colors depending on selected theme. — Friedrich, Sep 27 '18 at 13:04

angular material using theme colors

1 Answers1

Linked