Angular material io predefined theme color

Question

How do I access the color variables ( $primary, $accent, $warn, $foreground, $background) in scss file from a predefined angular theme @angular/material/prebuilt-themes/deeppurple-amber.css'?

Answer 1

Once a sass file has been compiled to css, there is no more notion of variable inside that css file, so you won't be able to retrieve variables like $primary from deeppurple-amber.css.

If you look at the scss source file for the deeppurple-amber theme, you can find the definition for $primary and other variables

$primary: mat-palette($mat-deep-purple);
$accent:  mat-palette($mat-amber, A200, A100, A400);

The mat-palette function and the base palette colors are available in your project from '~@angular/material/theming';

So to retrieve the palettes and colours, you can create try this:

Step #1 Create a file mat-vars.scss file

mat-vars.scss

@import '~@angular/material/theming';
//And then retrieve the palette

$myPrimaryPaletteVariable : mat-palette($mat-deep-purple);
$myAccentPaletteVariable : mat-palette($mat-amber, A200, A100, A400);

//Retrive the colors you need
$myPrimaryColor : mat-color($myPrimaryPaletteVariable);

Step #2 In your components scss files, just import that new file and use the variables

component.scss

@import '../../mat-vars';//ensure path is correct
.myText
{
    color: $myPrimaryColor;
}

Answer 2

create _variable.scss

// Import material theming functions
@import '~@angular/material/theming';

// Create your Sass color vars
$primary: mat-color($app-primary);
$accent: mat-color($app-accent);
$warn: mat-color($app-warn);

Import _variables.scss to the component's sass file where you want to use it.

@import "~_variables.scss";
.selected {
  background-color: $accent;
}

Don’t forget to include the theme.scss in the .angular-cli.json file:

{
...
  "apps": [{
  ...
  "styles": ["_variables.scss"]
  }]
  ...
}

if u still didn't get please go through this link https://medium.com/@aleixsuau/how-to-use-angular-material-2-sass-variables-in-your-components-76ce0203f126