Issue
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
Solution
Edit : in fact, this is not the recommended way...
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
Original answer :
First, defines your custom theme in a separate file (recommended) :
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);
Then, in the file where you want using your custom theme :
- Import the theme file :
@import '../../../theme.scss';
- You get the primary palette like that :
$primary: map-get($theme, primary);
- Then, you can use color like this :
background: mat-color($primary);
Answered By - eroak
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.