CODEWITHSUNDEEP
angularmaterial-designangular-materialangular-material2
Ced
Ced

Reputation: 17337

Using angular material colors in my own components

If I want to style an element that is not a material 2 component, with the colors defined in the theme, what is the standard way to do so ?

So say I've a h1 tag in a component and I would like the color to be my primary color. I would like to be able to do things like this:

h1{
  color: $color-primary; 
}

At the moment I have a theme.scss and styles.scss

theme.scss:

@import '~@angular/material/theming';
@include mat-core();
$color-primary: mat-palette($mat-blue);
$color-accent:  mat-palette($mat-amber, A400, A200, A500);
$color-warn:    mat-palette($mat-red);
$theme: mat-light-theme($color-primary, $color-accent, $color-warn);
@include angular-material-theme($theme);

I could import theme.scss in my component.scss, however they state not to do so:

Imports the mat-core() sass mixin. This includes all common styles that are used by multiple components. This should only be included once in your application. If this mixin is included multiple times, your application will end up with multiple copies of these common styles.

Upvotes: 1

Views: 1254

Answers (1)

rrjohnson85
rrjohnson85

Reputation: 412

I think this can be solved by splitting your custom theme into multiple files. For example, I have a _mat-colors.scss and _mat-theme.scss. _mat-colors includes the three color variables needed; _mat-theme uses _mat-colors and is where I define my palettes and include mat-core. You could then have a _variables or _colors file and use it as so:

@import '@angular/material/theming';
@import './mat-colors';

$color-red: mat-color($my-warn-palette);

You could then use $color-red or any other that you define as needed.

Upvotes: 2

Related Questions