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);

Answer 2

You can get CSS classes and CSS variables from the material theme. Simply, you need this function:

@use '../palette';

@mixin generateColors($prefix, $palette) {
  $colors-map: ();

  @each $key, $value in $palette {
    @if $key !=contrast {
      .app-#{$prefix}-#{$key} {
        color: map-get($palette, $key);
      }

    $map: ();
    $map: map-merge($map, ($key: $value));
    $colors-map: map-merge($colors-map, $map);
    }
  }

  :root {
    @each $key, $value in $colors-map {
      --app-#{$prefix}-#{$key}: #{$value};
    }
  }
}

@mixin generate-material-classes {
   @include generateColors(primary, $youtube-primary);
   @include generateColors(accent, $youtube-accent);
   @include generateColors(warning, $youtube-warning);
}

This would generate CSS classes and CSS variables so you can use like below:

Now use like this:

 <p class="app-primary-50 selected "> </p>

 // or using CSS variables
 selected {
   title: var(--app-primary-50);
 }

You can also check the blog about this topic: LINK.