Angular Material 访问主题颜色

Question

After some searching through SO and GitHub, I'd just like to get a clarification: There is NO WAY to access a theme color (or any other theme feature), for example to set a mat-card color:

• one cannot access a variable in scss
• one cannot set a class on the component (like class="mat-purple-with-spots")
• one cannot access the feature through the component API, because most of the time it doesn't expose any theme feature.

There are two options I can see:

• one, go through the hairpulling complexity of rolling a custom theme just for that component
• two, just copy the RGB code and set it in plain dumb CSS on your component

Am I missing something?

Answer 1

You can define a custom theme for main colors "accent, primary, warm".

https://material.angular.io/guide/theming#defining-a-custom-theme

In other scenario, you could have directives to apply at components what add a custom class with your styles and nested css selectors.

Example:

<mat-card yourDirectiveForCustomStyles></mat-card>