Angular Material 10 - how to use primary, accent, warn colors in my own styles?

Question

I simply need to use standard (not custom) $primary, $accent, $want colors to style my angular components. All I find in the docs and articles is how to customize it. I do not need to customize, just use the standard colors.

For example, I simply need to set text color:

    a {
      display: block;
      font-weight: bold;
      line-height: 2.3em;
      color: mat-color($accent);
    }

How do I do this? All I tried throws different errors.

Answer 1

Update:

In Angular Material, the default themes are already compiled into css, so access to any scss variables that involve the themes won't be available. You'll have to create a custom theme and work from there. Also, if you end up creating your own theme, b sure to update your angular.json to no longer import the default theme in styles

Old:

https://material.angular.io/guide/theming-your-components

This link should help you out importing the $primary/$accent scss variables from your angular material theme. The link includes many more examples, but this one was most helpful for me

your-component-scss-file.scss:

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

.candy-carousel {
  // Get the default hue for a palette.
  color: mat-color($primary);

  // Get a specific hue for a palette. 
  // See https://material.io/archive/guidelines/style/color.html#color-color-palette for hues.
  background-color: mat-color($accent, 300);

  // Get a relative color for a hue ('lighter' or 'darker')
  outline-color: mat-color($accent, lighter);

  // Get a contrast color for a hue by adding `-contrast` to any other key.
  border-color: mat-color($primary, '100-contrast');
}

So for your case:

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

//...

a {
  display: block;
  font-weight: bold;
  line-height: 2.3em;
  color: mat-color($accent);
}