angular material using theme colors - css

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.

Answer 1

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