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

user_2896495 0
Viewed 12310

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.

angular-material angular styling
2 Answers

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

This works for me. In xxx-component.scss:

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

$app-primary: mat-palette($mat-deep-purple);
$app-accent: mat-palette($mat-amber, A200, A100, A400);
$theme: mat-light-theme((
  color: (
    primary: $app-primary,
    accent: $app-accent,
  )
));
$color: mat-get-color-config($theme);

$primary: map-get($color, primary);
$accent: map-get($color, accent);

.class1 {
  color: map-get($primary, 400);
}

.class2 {
  color: mat-color($accent, 100);
}
user_99752240
Related