CODEWITHSUNDEEP
cssangularsassthemesangular-material
Strider
Strider

Reputation: 3749

Retrieve primary color in style sheets of the project

Is there a way to retrieve the primary color used in the angular material theme to the css files of an angular project?

In a project, we can define the primary color in a *.scss file like this:

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

@include mat-core();

$primary: mat-palette($mat-green, 800);
$accent:  mat-palette($mat-teal, 600, A100, A400);
$warn:    mat-palette($mat-red, 600);

$theme:   mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

I tried to use *.scss files in my components, but the $primary variable was unrecognizable:

//*.scss file
//...
.myclass {
  background: $primary; //This line compiles with the error 'Undefined variable: "$primary".'

}

Upvotes: 0

Views: 844

Answers (1)

SourceOverflow
SourceOverflow

Reputation: 2048

To use that variable it first has to be defined. Depending on where it is defined and finally changed (frameworks often have some kind of settings or similiar) then you need to @import those.

However, the way scss is usually used is by having one main file (name.scss) and multiple import files (_name.scss). That will then be compiled to a single css-file. The way to extend those rules is to add them at the end (or the marked point) of that main file. If you make a separate "main" file (and therefore css-file), you might have duplicate css and even if not, it is still impractical.

Also, you probably want to use mat-color($theme)

Upvotes: 1

Related Questions