I have defined a custom theme in angular 4 and want to use this in one of my component's scss file
Basically I want background of specific mat-grid-tile to be primary color
Below is my custom theme
@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent: mat-palette($mat-orange, A200, A100, A400);
$candy-app-warn: mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);
Below is code of my component's scss where i am trying to access this
@import '/src/styles.css';
:host { // host targets selector: 'home'
display: block;
left: 0;
width: 100%;
height: 100%;
}
.selected {
background: map-get($candy-app-theme,primary);
color:"white";
}
Compilation is failing static error that variable "$candy-app-theme" is not defined, but it is defined in styles.scss
I have just started Angular 4, hence i'm very unclear about it. Please let me know if any further code is required
Note: path from /src/styles.scss and '../../../styles.scss' both resolves correctly but none of them resolves variable
Instead of importing your theme in your components, you should use mixins as described in the documentation : https://material.angular.io/guide/theming-your-components
Be careful to define your theme in a less
or sass
/scss
file and not just simple css
file :
theme.scss
@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-yellow);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@import '../../../theme.scss';
$primary: map-get($theme, primary);
background: mat-color($primary);