Accessing primary color which is defined custom theme inside component's scss

Question

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

Answer 1

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 :

1. Import the theme file :

@import '../../../theme.scss';

2. You get the primary palette like that :

$primary: map-get($theme, primary);

3. Then, you can use color like this :

background: mat-color($primary);